css col-3,css - Bootstrap 3：仅为col-lg向右拉

css - Bootstrap 3：仅为col-lg向右拉

新的bootstrap 3 ....在我的布局中，我有：

elements 1

elements 2

我想要＆＃39;元素2＆＃39; 不要在小于col-lg屏幕上对齐。 因此，只有col-lg-6有效地使用类右拉...

我怎么能实现这个目标？

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

谢谢

13个解决方案

143 votes

你可以把＆＃34;元素2＆＃34; 在较小的列(即：float-lg-right)中，然后仅在较大的屏幕上使用push：

elements 1

elements 2

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

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

@media (max-width: 1200px) {

.row .col-lg-6 > .pull-right {

float: none !important;

}

}

最后，另一种选择是创建自己的float-lg-right CSS类。

@media (min-width: 1200px) {

.pull-right-lg {

float: right;

}

}

UPDATE

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

不需要额外的CSS。

Bootstrap 4演示

Zim answered 2019-06-25T20:21:21Z

24 votes

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

}

}

user1445230 answered 2019-06-25T20:21:45Z

18 votes

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

}

}

CoKe answered 2019-06-25T20:22:03Z

11 votes

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

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

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

Quinn answered 2019-06-25T20:22:42Z

3 votes

工作得很好：

/* small screen portrait */

@media (max-width: 321px) {

.pull-right {

float: none!important;

}

}

/* small screen lanscape */

@media (max-width: 480px) {

.pull-right {

float: none!important;

}

}

Greg answered 2019-06-25T20:23:06Z

3 votes

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

caw answered 2019-06-25T20:24:05Z

1 votes

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

}

}

aWebDeveloper answered 2019-06-25T20:24:29Z

1 votes

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

AlbertSamuel answered 2019-06-25T20:25:08Z

1 votes

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

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

elements 1

elements 2

元素将仅在lg屏幕上右对齐 - 其余display属性将设置为block，因为默认情况下为div元素。此方法在父元素上使用text-right类而不是pull-right。

替代方案：

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

elements 1

elements 2

elements 2

luke answered 2019-06-25T20:25:58Z

1 votes

现在包括bootstrap 4：

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

和代码应该是这样的：

elements 1

elements 2

Vasile answered 2019-06-25T20:26:30Z

1 votes

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

elements 1

elements 2

Carlos Ucha answered 2019-06-25T20:26:57Z

1 votes

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

.text-right-large {

text-align: right;

}

@media (max-width: 991px) {

.text-right-large {

text-align: left;

}

}

然后添加该类：

elements 1

elements 2

jchavannes answered 2019-06-25T20:27:30Z

1 votes

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

.pull-right-xs {

@extend .pull-right;

}

Rogerio Orioli answered 2019-06-25T20:27:56Z