Question

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/

谢谢你

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

演示：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 包含responsive floats，因此在这种情况下，您只需使用float-lg-right。无需额外的CSS

Bootstrap 4 Demo

Answer 2

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

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

Answer 3

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

Answer 4

无需使用媒体查询创建自己的类。 Bootstrap 3已经在Column Ordering：http://getbootstrap.com/css/#grid-column-ordering

下对媒体断点进行了浮动排序

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

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

Answer 5

也可以正常工作：

/* small screen portrait */

@media (max-width: 321px) {

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

}


/* small screen lanscape */

@media (max-width: 480px) {

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

}

Answer 6

将下面显示的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

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

来自Bootstrap 4的

。

Answer 7

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

import { catchError } from 'rxjs/operators';

Rx.of(4)
  .pipe(
    catchError(err => Rx.of(7))
   )

然后添加该类：

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

Answer 8

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

Answer 9

只需使用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元素。这种方法在父元素上使用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>

Answer 10

现在包括bootstrap 4：

<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="text" encoding="UTF-8"/>

<xsl:key name="vehicle-by-series" match="Vehicle[Model='KA']" use="Series" />

<xsl:template match="/Dealer">
    <xsl:for-each select="Vehicle[Model='KA'][count(. | key('vehicle-by-series', Series)[1]) = 1]">
        <xsl:value-of select="Model"/>
        <xsl:text>: </xsl:text>
        <xsl:value-of select="Series"/>
        <xsl:text>, </xsl:text>
        <xsl:variable name="grp" select="key('vehicle-by-series', Series)" />
        <xsl:value-of select="count($grp)"/>
        <xsl:text> in stock, starting from </xsl:text>
        <xsl:for-each select="$grp">
            <xsl:sort select="Price" data-type="number" order="ascending"/>
            <xsl:if test="position() = 1">
                <xsl:value-of select="Price"/>
            </xsl:if>
        </xsl:for-each>
        <xsl:text>&#10;</xsl:text>
    </xsl:for-each>
</xsl:template>

</xsl:stylesheet>

和代码应该是这样的：

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

Answer 11

您可以使用推拉来更改列顺序。您拉出一列并将另一列推到大型设备上：

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

Answer 12

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

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

Bootstrap 3：仅用于col-lg的右拉

12 个答案: