CSS Bootstrap 3：仅对 col-lg 右拉
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19404861/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3: pull-right for col-lg only
提问by Thibs
New to bootstrap 3.... In my layout I have:
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>
I would like the 'elements 2' to NOT be aligned right on smaller than col-lg screens. So effectively having the class pull-right only for col-lg-6...
我希望“元素 2”不要在小于 col-lg 的屏幕上对齐。如此有效地让该类仅对 col-lg-6 进行右拉...
How could I achieve this?
我怎么能做到这一点？
Here is a fiddle: http://jsfiddle.net/thibs/Y6WPz/
这是一个小提琴：http: //jsfiddle.net/thibs/Y6WPz/
Thank-you
谢谢
回答by Zim
You could put "element 2" in a smaller column (ie: col-2) and then use pushon larger screens only:
您可以将“元素 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>
Demo: http://bootply.com/88095
Another option is to override the float of .pull-rightusing a @media query..
另一种选择是覆盖.pull-right使用@media 查询的浮动..
@media (max-width: 1200px) {
.row .col-lg-6 > .pull-right {
float: none !important;
}
}
Lastly, another option is to create your own .pull-right-lgCSS class..
最后，另一种选择是创建自己的.pull-right-lgCSS 类。
@media (min-width: 1200px) {
.pull-right-lg {
float: right;
}
}
UPDATE
更新
Bootstrap 4includes responsive floats, so in this case you'd just use float-lg-right.
No extra CSS is needed.
Bootstrap 4包含响应式 floats，因此在这种情况下，您只需使用float-lg-right.
不需要额外的 CSS。
回答by user1445230
Try this LESS snippet (It's created from the examples above & the media query mixins in grid.less).
试试这个 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;
}
}
回答by CoKe
.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;
}
}
回答by Quinn
There is no need to create your own class with media queries. Bootstrap 3 already has float ordering for media breakpoints under Column Ordering: http://getbootstrap.com/css/#grid-column-ordering
无需使用媒体查询创建自己的类。Bootstrap 3 已经在列排序下对媒体断点进行了浮动排序：http: //getbootstrap.com/css/#grid-column-ordering
The syntax for the class is col-<#grid-size>-(push|pull)-<#cols>where <#grid-size>is xs, sm, md or lg and <#cols>is how far you want the column to move for that grid size. Push or pull is left or right of course.
该类的语法是col-<#grid-size>-(push|pull)-<#cols>where <#grid-size>is xs、sm、md 或 lg 以及<#cols>您希望该列针对该网格大小移动多远。推或拉当然是向左或向右。
I use it all the time so I know it works well.
我一直在使用它，所以我知道它运行良好。
回答by caw
Adding the CSS shown below to your Bootstrap 3application enables support for
将下面显示的 CSS 添加到您的Bootstrap 3应用程序，以支持
pull-{ε|sm-|md-|lg-}left
pull-{ε|sm-|md-|lg-}right
classes that work exactly like the new
与新的完全一样的类
float-{ε|sm-|md-|lg-|xl-}left
float-{ε|sm-|md-|lg-|xl-}right
classes that have been introduced in Bootstrap 4:
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;
}
Apart from that, it adds
除此之外，它还添加了
pull-{ε|sm-|md-|lg-}none
for completeness, being compatible with
为了完整性，与
float-{ε|sm-|md-|lg-|xl-}none
from Bootstrap 4.
来自 Bootstrap 4。
回答by Greg
Works fine too:
也能正常工作：
/* small screen portrait */
@media (max-width: 321px) {
.pull-right {
float: none!important;
}
}
/* small screen lanscape */
@media (max-width: 480px) {
.pull-right {
float: none!important;
}
}
回答by jchavannes
For those interested in text alignment, a simple solution is to create a new class:
对于那些对文本对齐感兴趣的人，一个简单的解决方案是创建一个新类：
.text-right-large {
text-align: right;
}
@media (max-width: 991px) {
.text-right-large {
text-align: left;
}
}
Then add that class:
然后添加该类：
<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>
回答by Rogerio Orioli
It is very simple using Sass, just use @extend:
使用 Sass 非常简单，只需使用@extend：
.pull-right-xs {
@extend .pull-right;
}
回答by Carlos Ucha
You can use push and pull to change column ordering. You pull one column and push the other on large devices:
您可以使用推和拉来更改列顺序。您在大型设备上拉出一列并推动另一列：
<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>
回答by aWebDeveloper
This is what i am using . change @screen-md-max for other sizes
这就是我正在使用的。将 @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;
}
}
