Bootstrap 3：向右拉仅适用于col-lg

小编典典

Bootstrap 3：向右拉仅适用于col-lg

css

引导程序3的新手。…在我的布局中，我有：

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6">
         <div class="pull-right">
            elements 2
         </div>
    </div>
</div>

我希望’elements 2’在小于col-lg的屏幕上不对齐。如此有效地让类只向col-lg-6右推…

我怎样才能做到这一点？

谢谢

阅读 336

2020-05-16

共1个答案

小编典典

您可以将“元素2”放在较小的列（即：）中col-2，然后push仅在较大的屏幕上使用：

<div class="row">
    <div class="col-lg-6 col-xs-6">elements 1</div>
    <div class="col-lg-6 col-xs-6">
      <div class="row">
       <div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0">
         <div class="pull-right">elements 2</div>
       </div>
      </div>
    </div>
</div>

另一种选择是覆盖.pull-right使用@media查询的浮动方式。

@media (max-width: 1200px) {
    .row .col-lg-6 > .pull-right {
        float: none !important;
    }
}

最后，另一个选择是创建自己的.pull-right-lgCSS类。

@media (min-width: 1200px) {
    .pull-right-lg {
        float: right;
    }
}

2020-05-16