Bootstrap 3: 仅用于 coll 的 pull-right

小开

最佳答案

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

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

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

最后，另一个选项是创建您自己的 .pull-right-lg CSS 类. 。

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

更新

Bootstrap 4 包含有反应的浮子，因此在这种情况下您只需使用 float-lg-right。

引导程序4演示

小开

尝试这个 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;
}
}

小开

效果也不错:

/* small screen portrait */


@media (max-width: 321px) {


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


}




/* small screen lanscape */


@media (max-width: 480px) {


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


}

小开

这是我正在使用的。 change@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;
}
}

小开

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

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

我一直在用它，所以我知道它很好用。

小开

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

小开

这个问题在 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

小开

只要使用 bootstrap 的响应实用程序类！

这项任务的最佳解决方案是使用以下代码:

<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元素的默认值是 block。这种方法在父元素上使用 text-right类而不是 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>

小开

现在包括 bootstrap 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>

小开

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

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

类的工作原理与新的

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

引导程序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号引导程序。

小开

您可以使用推和拉来更改列顺序。你拉一根柱子，推另一根柱子到大型设备上:

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

小开

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

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

小开

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

.pull-right-xs {
@extend .pull-right;
}