Pytanie Przesunięcie Bootstrap 3 po prawej nie po lewej


Jeśli chodzi o BS 3, gdybym chciał tylko wąską kolumnę treści po prawej stronie, mógłbym użyć klasy offsetowej 9 i kolumny 3.

Co jednak, gdybym chciał odwrócić i po lewej stronie? Czy jest to właściwy sposób w BS lub czy powinienem używać własnych metod CSS? Zastanawiałem się nad stworzeniem kolumny 3 z moją zawartością i po prostu pustą kolumną 9.


76
2017-12-12 02:34


pochodzenie




Odpowiedzi:


Wiersze Bootstrap zawsze zawierają ich zmienne i tworzą nowe linie. Nie musisz martwić się o wypełnianie pustych kolumn, tylko upewnij się, że nie sumują się więcej niż 12.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-3 col-xs-offset-9">
      I'm a right column of 3
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3">
      I'm a left column of 3
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      And I'm some content below both columns
    </div>
  </div>
</div>


83
2017-12-12 06:43



Możliwe do uruchomienia skrawki kodu zostały wprowadzone w zeszłym miesiącu. Blog Stack Overflow wyjaśnia, jak z nich korzystać: blog.stackoverflow.com/2014/09/... - Ross Allen
Dla pustej kolumny użyj Bootstrap col-X-pull-Y klasy. Na przykład, aby przesunąć coś o wielkości 50% w prawo, ale pozostaw jedną kolumnę przestrzeni po prawej (na przykład w 12-kolumnowej siatce): col-xs-6 pull-right col-xs-pull-1 - James Cushing


Używam poniższego prostego niestandardowego CSS, który napisałem, aby to osiągnąć.

.col-xs-offset-right-12 {
  margin-right: 100%;
}
.col-xs-offset-right-11 {
  margin-right: 91.66666667%;
}
.col-xs-offset-right-10 {
  margin-right: 83.33333333%;
}
.col-xs-offset-right-9 {
  margin-right: 75%;
}
.col-xs-offset-right-8 {
  margin-right: 66.66666667%;
}
.col-xs-offset-right-7 {
  margin-right: 58.33333333%;
}
.col-xs-offset-right-6 {
  margin-right: 50%;
}
.col-xs-offset-right-5 {
  margin-right: 41.66666667%;
}
.col-xs-offset-right-4 {
  margin-right: 33.33333333%;
}
.col-xs-offset-right-3 {
  margin-right: 25%;
}
.col-xs-offset-right-2 {
  margin-right: 16.66666667%;
}
.col-xs-offset-right-1 {
  margin-right: 8.33333333%;
}
.col-xs-offset-right-0 {
  margin-right: 0;
}
@media (min-width: 768px) {
  .col-sm-offset-right-12 {
    margin-right: 100%;
  }
  .col-sm-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-sm-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-sm-offset-right-9 {
    margin-right: 75%;
  }
  .col-sm-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-sm-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-sm-offset-right-6 {
    margin-right: 50%;
  }
  .col-sm-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-sm-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-sm-offset-right-3 {
    margin-right: 25%;
  }
  .col-sm-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-sm-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-sm-offset-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 992px) {
  .col-md-offset-right-12 {
    margin-right: 100%;
  }
  .col-md-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-md-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-md-offset-right-9 {
    margin-right: 75%;
  }
  .col-md-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-md-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-md-offset-right-6 {
    margin-right: 50%;
  }
  .col-md-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-md-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-md-offset-right-3 {
    margin-right: 25%;
  }
  .col-md-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-md-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-md-offset-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 1200px) {
  .col-lg-offset-right-12 {
    margin-right: 100%;
  }
  .col-lg-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-lg-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-lg-offset-right-9 {
    margin-right: 75%;
  }
  .col-lg-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-lg-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-lg-offset-right-6 {
    margin-right: 50%;
  }
  .col-lg-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-lg-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-lg-offset-right-3 {
    margin-right: 25%;
  }
  .col-lg-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-lg-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-lg-offset-right-0 {
    margin-right: 0;
  }
}

74
2017-12-16 09:13



Kodowanie na twardo wartości procentowych jest bardzo nieidealne. Dodatkowo, możesz zmienić sposób działania systemu siatki Bootstrap, więc nie masz gwarancji, że masz 12 kolumn. W takim przypadku odpowiedź nie powiedzie się. Lepiej wyliczyć procent w stosunku do liczby kolumn siatki. - Muhammad Abdul-Rahim
bootstrap robi to samo tylko z lewej strony - Scott


Zmodyfikowałem Bootstrap SASS (v3.3.5) na podstawie Odpowiedź Rukshana

Dodaj to na końcu calc-grid-column mieszać w mixins/_grid-framework.scss, tuż pod $type == offset jeśli warunek.

@if ($type == offset-right) {
      .col-#{$class}-offset-right-#{$index} {
          margin-right: percentage(($index / $grid-columns));
      }
  }

Zmodyfikuj make-grid mieszać w mixins/_grid-framework.scss wygenerować offset-right klasy.

// Utwórz siatkę dla konkretnej klasy
@mixin make-grid ($ class) {
  @include float-grid-columns (klasa $);
  @include kolumny-siatki-siatki ($ grid-columns, $ class, width);
  @include kolumny-siatki-siatki ($ grid-columns, $ class, pull);
  @include kolumny-siatki-siatki ($ grid-columns, $ class, push);
  @include kolumny-siatki-siatki ($ grid-columns, $ class, offset);
   @include kolumny-siatki-siatki ($ grid-columns, $ class, offset-right);
}

Następnie możesz użyć klas takich jak col-sm-offset-right-2 i col-md-offset-right-1


15
2018-06-29 07:25



+1 za używanie percentage zamiast kodować wartości; jest to bliższe temu, jak Bootstrap wewnętrznie obsługuje system siatki, a także pozwala na zmienną kolumnę siatki, jeśli domyślne 12 jest niepożądane. - Muhammad Abdul-Rahim
proszę zaktualizuj nazwę pliku mixins/_grid_framework.scss do mixins/_grid-framework.scss w twoim drugim akapicie też - Zanshin13


<div class="row">
<div class="col-md-10 col-md-pull-2">
col-md-10 col-md-pull-2
</div>
<div class="col-md-10 col-md-pull-2">
col-md-10 col-md-pull-2
</div>
</div>


10
2018-06-02 06:44





Oparte na Odpowiedź WeNeigh'a! tutaj jest MNIEJ przykład

.col-offset-right(@i, @type) when (@i >= 0) {
    .col-@{type}-offset-right-@{i} {
        margin-right: percentage((@i / @grid-columns));
    }
    .col-offset-right(@i - 1, @type);
};
.col-offset-right(@grid-columns, xs);
.col-offset-right(@grid-columns, sm);
.col-offset-right(@grid-columns, md);
.col-offset-right(@grid-columns, lg);

0
2017-07-29 22:29





Tutaj jest to samo rozwiązanie niż Rukshan, ale w sass (aby zachować konfigurację siatki) dla specjalnego przypadku, który nie działa z rozwiązaniem Ross Allen (gdy nie możesz mieć rodzica div.row)

@mixin make-grid-offset-right($class) {
    @for $index from 0 through $grid-columns {
        .col-#{$class}-offset-right-#{$index} {
            margin-right: percentage(($index / $grid-columns));
        }
    }
}

@include make-grid-offset-right(xs);

@media (min-width: $screen-sm-min) {
  @include make-grid-offset-right(sm);
}

@media (min-width: $screen-md-min) {
  @include make-grid-offset-right(md);
}

@media (min-width: $screen-lg-min) {
  @include make-grid-offset-right(lg);
}

0
2017-07-29 10:36