Jeśli chodzi o BS 3, gdybym chciał tylko wąskiej kolumny treści po prawej stronie, mógłbym użyć klasy przesunięcia 9 i kolumny 3.
A co gdybym chciał rewers i po lewej stronie? Czy istnieje właściwy sposób na zrobienie tego w BS, czy powinienem po prostu użyć własnych metod CSS? Myślałem o utworzeniu kolumny 3 z moją zawartością i tylko pustej kolumny 9.
twitter-bootstrap-3
Współpraca 2013
źródło
źródło
col-X-pull-Y
klas Bootstrap . Na przykład, aby przesunąć coś o wielkości 50% w prawo, ale zostawić jedną kolumnę odstępu w prawo (na przykład w siatce 12-kolumnowej):col-xs-6 pull-right col-xs-pull-1
col-xs-6
), będzie się układać dziwnie.Aby to osiągnąć, używam następującego prostego niestandardowego CSS, który napisałem.
źródło
<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>
źródło
Zmodyfikowałem Bootstrap SASS (v3.3.5) w oparciu o odpowiedź Rukshana
Dodaj to na końcu
calc-grid-column
miksowaniamixins/_grid-framework.scss
, tuż poniżej$type == offset
warunku if.Zmodyfikuj
make-grid
miks wmixins/_grid-framework.scss
celu generowaniaoffset-right
klas.Następnie możesz użyć klas takich jak
col-sm-offset-right-2
icol-md-offset-right-1
źródło
percentage
zamiast zakodowania wartości; jest to bliższe temu, w jaki sposób Bootstrap wewnętrznie obsługuje system siatki, a ponadto pozwala na zmienną kolumnę siatki, jeśli domyślna wartość 12 jest niepożądana.Ponieważ wydaje się, że Google podoba się ta odpowiedź ...
Jeśli chcesz dopasować konwencję nazewnictwa Bootstrap 4, tj. Offset - * - #, oto ta modyfikacja:
źródło
Na podstawie odpowiedzi WeNeigh ! oto MNIEJSZY przykład
źródło
Musisz połączyć wiele klas (
col-*-offset-*
dla lewego marginesu icol-*-pull-*
pociągnij go w prawo)<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-xs-3 col-xs-offset-9"> I'm a right column </div> <div class="col-xs-3"> We're </div> <div class="col-xs-3"> four columns </div> <div class="col-xs-3"> using the </div> <div class="col-xs-3"> whole row </div> <div class="col-xs-3 col-xs-offset-9 col-xs-pull-9"> I'm a left column </div> <div class="col-xs-3"> We're </div> <div class="col-xs-3"> four columns </div> <div class="col-xs-3"> using the </div> <div class="col-xs-3"> whole row </div> </div> </div>
Nie musisz więc ręcznie rozdzielać go na różne wiersze.
źródło
Oto to samo rozwiązanie co Rukshan, ale w sass (w celu zachowania konfiguracji sieci) dla specjalnego przypadku, który nie działa z rozwiązaniem Rossa Allena (kiedy nie możesz mieć nadrzędnego div.row)
źródło
<div class="row col-xs-12"> <nav class="col-xs-12 col-xs-offset-7" aria-label="Page navigation"> <ul class="pagination mt-0"> <li class="page-item"> <div class="form-group"> <div class="input-group"> <input type="text" asp-for="search" class="form-control" placeholder="Search" aria-controls="order-listing" /> <div class="input-group-prepend bg-info"> <input type="submit" value="Search" class="input-group-text bg-transparent"> </div> </div> </div> </li> </ul> </nav> </div>
źródło