Что касается BS 3, если мне нужен только узкий столбец содержимого справа, я мог бы использовать класс смещения 9 и столбец 3.
Однако что, если мне нужно обратное и с левой стороны? Есть ли правильный способ сделать это в BS, или я должен просто использовать свои собственные методы CSS? Я думал создать столбец из 3 с моим контентом и просто пустой столбец из 9.
twitter-bootstrap-3
Работаем вместе2013
источник
источник
col-X-pull-Yклассы Bootstrap . Например, чтобы сдвинуть что-то размером 50% вправо, но оставить один столбец пространства справа (например, в сетке из 12 столбцов):col-xs-6 pull-right col-xs-pull-1col-xs-6), он будет складываться странно.Я использую следующий простой пользовательский CSS, который написал для этого.
источник
<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>источник
Я модифицировал Bootstrap SASS (v3.3.5) на основе ответа Рукшана
Добавьте это в конец
calc-grid-columnмиксинаmixins/_grid-framework.scssпрямо под$type == offsetусловием if.Измените
make-gridмиксин,mixins/_grid-framework.scssчтобы сгенерироватьoffset-rightклассы.// Создаем сетку для конкретного класса @mixin make-grid ($ class) { @include float-grid-columns ($ class); @include loop-grid-columns ($ grid-columns, $ class, width); @include loop-grid-columns ($ grid-columns, $ class, pull); @include loop-grid-columns ($ grid-columns, $ class, push); @include loop-grid-columns ($ grid-columns, $ class, offset); @include loop-grid-columns ($ grid-columns, $ class, offset-right); }Затем вы можете использовать такие классы, как
col-sm-offset-right-2иcol-md-offset-right-1источник
percentageвместо жесткого кодирования значений; это ближе к тому, как Bootstrap внутренне обрабатывает систему сетки, плюс он позволяет использовать переменный столбец сетки, если значение по умолчанию 12 нежелательно.Поскольку Google, похоже, нравится этот ответ ...
Если вы хотите соответствовать соглашению об именах Bootstrap 4, то есть смещению - * - #, вот это изменение:
источник
На основе ответа WeNeigh ! вот МЕНЬШЕ пример
источник
Вам нужно объединить несколько классов (
col-*-offset-*для левого поля иcol-*-pull-*для того, чтобы потянуть его вправо)<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>Так что вам не нужно вручную разделять его на разные строки.
источник
Вот то же решение, что и Rukshan, но в sass (чтобы сохранить конфигурацию вашей сетки) для особого случая, который не работает с решением Росс Аллена (когда у вас не может быть родительского div.row)
источник
<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>источник