129

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

我希望“元素 2”不要在小于 col-lg 的屏幕上对齐。如此有效地使课程仅适用于 col-lg-6...

我怎么能做到这一点？

这是一个小提琴：http: //jsfiddle.net/thibs/Y6WPz/

谢谢

4

13 回答 13

158

您可以将“元素 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>

演示：http ://bootply.com/88095

另一种选择是覆盖.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;
    }
}

更新

Bootstrap 4包含响应式浮点数，因此在这种情况下您只需使用float-lg-right.
不需要额外的 CSS。

Bootstrap 4 演示

于 2013-10-16T13:56:46.020 回答
28

试试这个 LESS 片段（它是根据上面的示例和 grid.less 中的媒体查询混合创建的）。

@media (min-width: @screen-sm-min) {
.pull-right-sm {
  float: right;
}
}
@media (min-width: @screen-md-min) {
.pull-right-md {
  float: right;
}
}
@media (min-width: @screen-lg-min) {
.pull-right-lg {
  float: right;
}
}
于 2014-03-11T17:25:10.303 回答
21 
.pull-right-not-xs, .pull-right-not-sm, .pull-right-not-md, .pull-right-not-lg{
    float: right;
}

.pull-left-not-xs, .pull-left-not-sm, .pull-left-not-md, .pull-left-not-lg{
    float: left;
}
@media (max-width: 767px) {    
    .pull-right-not-xs, .pull-left-not-xs{
        float: none;
    }
    .pull-right-xs {
        float: right;
    }
    .pull-left-xs {
        float: left;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .pull-right-not-sm, .pull-left-not-sm{
        float: none;
    }
    .pull-right-sm {
        float: right;
    }
    .pull-left-sm {
        float: left;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .pull-right-not-md, .pull-left-not-md{
        float: none;
    }
    .pull-right-md {
        float: right;
    }
    .pull-left-md {
        float: left;
    }
}
@media (min-width: 1200px) {
    .pull-right-not-lg, .pull-left-not-lg{
        float: none;
    }
    .pull-right-lg {
        float: right;
    }
    .pull-left-lg {
        float: left;
    }
}
于 2015-03-17T08:25:16.817 回答
12

无需使用媒体查询创建自己的类。Bootstrap 3 已经在列排序下对媒体断点进行浮动排序：http: //getbootstrap.com/css/#grid-column-ordering

该类的语法col-<#grid-size>-(push|pull)-<#cols>是<#grid-size>xs、sm、md 或 lg<#cols>的位置，以及您希望该列针对该网格大小移动多远。推或拉当然是左或右。

我一直在使用它，所以我知道它运作良好。

于 2015-02-28T08:59:24.973 回答
3

也可以正常工作：

/* small screen portrait */

@media (max-width: 321px) {

  .pull-right { 
    float: none!important; 
  }

}


/* small screen lanscape */

@media (max-width: 480px) {

  .pull-right {
    float: none!important; 
  }

}
于 2014-03-27T17:40:28.650 回答
3

将下面显示的 CSS 添加到您的Bootstrap 3应用程序可以支持

pull-{ε|sm-|md-|lg-}left
pull-{ε|sm-|md-|lg-}right

与新的完全一样的类

float-{ε|sm-|md-|lg-|xl-}left
float-{ε|sm-|md-|lg-|xl-}right

Bootstrap 4 中引入的类：

@media (min-width: 768px) {
    .pull-sm-left {
        float: left !important;
    }
    .pull-sm-right {
        float: right !important;
    }
    .pull-sm-none {
        float: none !important;
    }
}
@media (min-width: 992px) {
    .pull-md-left {
        float: left !important;
    }
    .pull-md-right {
        float: right !important;
    }
    .pull-md-none {
        float: none !important;
    }
}
@media (min-width: 1200px) {
    .pull-lg-left {
        float: left !important;
    }
    .pull-lg-right {
        float: right !important;
    }
    .pull-lg-none {
        float: none !important;
    }
}
.pull-none {
    float: none !important;
}

除此之外，它还添加

pull-{ε|sm-|md-|lg-}none

为了完整性，与

float-{ε|sm-|md-|lg-|xl-}none

来自引导程序 4。

于 2017-01-18T23:13:26.750 回答
2

使用 Sass 非常简单，只需使用@extend：

.pull-right-xs { 
    @extend .pull-right;
 }
于 2018-12-17T14:53:16.813 回答
2

对于那些对文本对齐感兴趣的人，一个简单的解决方案是创建一个新类：

.text-right-large {
    text-align: right;
}
@media (max-width: 991px) {
    .text-right-large {
        text-align: left;
    }
}

然后添加该类：

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6 text-right-large">
        elements 2
    </div>
</div>
于 2018-05-17T15:30:20.927 回答
1

这就是我正在使用的。将 @screen-md-max 更改为其他尺寸

/* Pull left in lg resolutions */
@media (min-width: @screen-md-max) {
    .pull-xs-right {
        float: right !important;
    }
    .pull-xs-left {
        float: left !important;
    }

    .radio-inline.pull-xs-left  + .radio-inline.pull-xs-left ,
    .checkbox-inline.pull-xs-left  + .checkbox-inline.pull-xs-left  {
        margin-left: 0;
    }
    .radio-inline.pull-xs-left, .checkbox-inline.pull-xs-left{
        margin-right: 10px;
    }
}
于 2014-06-18T09:21:42.137 回答
1

这个问题在 bootstrap-4-alpha-2 中得到解决。

这是链接：http: //blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/

在 github 上克隆它： https ://github.com/twbs/bootstrap/tree/v4.0.0-alpha.2

于 2015-12-17T00:50:59.513 回答
1

只需使用引导程序的响应式实用程序类！

该任务的最佳解决方案是使用以下代码：

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6 text-right">
        <div class="visible-lg-inline-block visible-md-block visible-sm-block visible-xs-block">
            elements 2
        </div>
    </div>
</div>

元素将仅在lg屏幕上向右对齐 - 在其余部分，该display属性将设置block为div元素的默认值。这种方法是text-right在父元素上使用 class 而不是pull-right.

替代解决方案：

最大的缺点是里面的html代码需要重复两次。

<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 visible-lg">
            elements 2
         </div>
         <div class="hidden-lg">
            elements 2
         </div>
    </div>
</div>
于 2016-08-09T09:20:42.123 回答
1

您可以使用 push 和 pull 来更改列顺序。您在大型设备上拉一列并推动另一列：

<div class="row">
    <div class="col-lg-6 col-md-6 col-lg-pull-6">elements 1</div>
    <div class="col-lg-6 col-md-6 col-lg-push-6">
         <div>
            elements 2
         </div>
    </div>
</div>
于 2018-05-10T11:39:26.410 回答
0

现在包括引导程序 4：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css');

和代码应该是这样的：

<div class="row">
    <div class="col-lg-6 col-md-6" style="border:solid 1px red">elements 1</div>
    <div class="col-lg-6 col-md-6" style="border:solid 1px red">
         <div class="pull-lg-right pull-xl-right">
            elements 2
         </div>
    </div>
</div>
于 2016-09-02T08:17:31.317 回答