引导3偏移右边不左边

关于学士学位3，如果我只想要一个狭窄的专栏内容，我可能会使用9的抵消类和3列。

但是，如果我想要反向和左侧呢？ 有没有一个正确的方法来做到这一点在BS或者我应该只使用我自己的CSS方法？ 我正在考虑用我的内容创build一个3列，只是一个9列的空列。

Answer 1

引导行总是包含它们的浮点数并创build新行。 您不必担心填充空白列，只要确保它们不超过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> 

Answer 2

我正在使用以下简单的自定义CSS来实现这一点。

 .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; } } 

Answer 3

我根据Rukshan的回答修改了Bootstrap SASS（v3.3.5）

将这个添加到mixins/_grid-framework.scss中的calc-grid-column mixin的mixins/_grid-framework.scss ，就在$type == offset if的条件下。

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

修改mixins/_grid-framework.scss的make-grid mixin生成offset-right类。

 //为特定的类创build网格
 @mixin make-grid（$ class）{
   @include float-grid-columns（$ class）;
   @include循环网格列（$ grid-columns，$ class，width）;
   @包括循环网格列（$网格列，$类，拉）;
   @包括循环网格列（$网格列，$类，推）;
   @include loop-grid-columns（$ grid-columns，$ class，offset）;
   @include循环栅格列（$ grid-columns，$ class，offset-right）;
 }

然后，您可以使用像col-sm-offset-right-2和col-md-offset-right-1

Answer 4

 <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> 

Answer 5

根据WeNeigh的回答 ！ 这是一个很less的例子

 .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); 

Answer 6

这里的解决scheme与Rukshan相同，但在sass（为了保持你的网格configuration）的特殊情况，不与罗斯艾伦解决scheme（当你不能有一个父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); }