引导程序3：仅向col-lg拉右
新引导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”不要在小于屏幕的屏幕上alignment。 所以有效的只有col-lg-6才能上课
我怎么能做到这一点？
这是一个小提琴： http : //jsfiddle.net/thibs/Y6WPz/
谢谢
你可以把“元素2”放在一个较小的列（即： col-2 ）中，然后只在大屏幕上使用：
<div class="row"> <div class="col-lg-6 col-xs-6">elements 1</div> <div class="col-lg-6 col-xs-6"> <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>
演示： http ： //bootply.com/88095
另一种select是使用@media查询覆盖.pull-right的float。
@media (max-width: 1200px) { .row .col-lg-6 > .pull-right { float: none !important; } }
最后，另一种select是创build你自己的.pull-right-lg CSS类..
@media (min-width: 1200px) { .pull-right-lg { float: right; } }
UPDATE
Bootstrap 4将包含响应的浮点数 ，所以在这种情况下，您只需使用float-lg-right 。
不需要额外的CSS 。
Bootstrap 4演示
试试这个LESS片断（它是从上面的例子和媒体查询mixin在grid.less中创build的）。
@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; } }
.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; } }
媒体查询不需要创build自己的类。 Bootstrap 3已经在列顺序下为媒体断点浮点sorting： http : //getbootstrap.com/css/#grid-column-ordering
这个类的语法是col-<#grid-size>-(push|pull)-<#cols>其中<#grid-size>是xs，sm，md或lg， <#cols> col-<#grid-size>-(push|pull)-<#cols> <#cols>是你想要的距离要移动的网格大小的列。 推或拉当然是左或右。
我一直使用它，所以我知道它运作良好。
将下面显示的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
从Bootstrap 4。
工作得很好：
/* small screen portrait */ @media (max-width: 321px) { .pull-right { float: none!important; } } /* small screen lanscape */ @media (max-width: 480px) { .pull-right { float: none!important; } }
只需使用引导程序的响应式实用程序类即可！
该任务的最佳解决scheme是使用以下代码：
<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屏幕上alignment到右侧 – 其余的display属性将被设置为block因为它是默认的div元素。 这种方法是在父元素上使用text-right而不是pull-right 。
替代scheme：
最大的缺点是里面的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>
这是我正在使用的。 更改其他尺寸的@ 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-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 4：
@import url('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>
