css - Bootstrap 3:仅为col-lg向右拉
新的bootstrap 3 ....在我的布局中,我有:
elements 2
我想要'元素2' 不要在小于col-lg屏幕上对齐。 因此,只有col-lg-6有效地使用类右拉...
我怎么能实现这个目标?
这是一个小提琴:[http://jsfiddle.net/thibs/Y6WPz/]
谢谢
13个解决方案
143 votes
你可以把"元素2" 在较小的列(即:float-lg-right)中,然后仅在较大的屏幕上使用push:
演示:[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 2
元素将仅在lg屏幕上右对齐 - 其余display属性将设置为block,因为默认情况下为div元素。此方法在父元素上使用text-right类而不是pull-right。
替代方案:
最大的缺点是内部的html代码需要重复两次。
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 2
Vasile answered 2019-06-25T20:26:30Z
1 votes
您可以使用推拉来更改列排序。 您拉出一列并将另一列推到大型设备上:
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 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