Twitter Bootstrap 3条件.text-center

如果“XS”只有.text-left改为.text-center才可以创建一个col？Twitter Bootstrap 3条件.text-center

<div class="row"> 
    <div class="col-xs-12 col-sm-4 text-left text-uppercase">Left Col</div> 
    <div class="col-xs-12 col-sm-8 text-right">Right Col</div> 
</div>

因此，两列在同一行上，左边是.text-left，右边是.text-right。当屏幕尺寸为XS时，它们将成为一条线，两条线与.text-center

谢谢。

来源

2015-05-21 medk

只有这样我可以认为这是有一个自定义的类象如下。似乎是它可以以某种方式重构，但它是什么，我现在能想到的：

<div class="row"> 
    <div class="col-xs-12 col-sm-4 customTextLeft text-uppercase">Left Col</div> 
    <div class="col-xs-12 col-sm-8 customTextRight">Right Col</div> 
</div> 
/*CSS*/ 
/*screen-xs*/ 
@media (max-width: 768px) { 
    .customTextLeft{text-align:center;} 
} 
/*screen-sm*/ 
@media (min-width: 768px) and (max-width: 992px) { 
    .customTextLeft{text-align:left;} 
} 
/*screen-md*/ 
@media (min-width: 992px) and (max-width: 1200px) { 
    .customTextLeft{text-align:left;} 
} 
/*screen-lg corresponds with col-lg*/ 
@media (min-width: 1200px) { 
    .customTextLeft{text-align:left} 
} 

/*screen-xs*/ 
@media (max-width: 768px) { 
    .customTextRight{text-align:center;} 
} 
/*screen-sm*/ 
@media (min-width: 768px) and (max-width: 992px) { 
    .customTextRight{text-align:right;} 
} 
/*screen-md*/ 
@media (min-width: 992px) and (max-width: 1200px) { 
    .customTextRight{text-align:right;} 
} 
/*screen-lg corresponds with col-lg*/ 
@media (min-width: 1200px) { 
    .customTextRight{text-align:right} 
}

来源

2015-05-21 22:45:28 cabey77

您可以使用引导程序的Responsive Utility Classes隐藏和显示备用列。

喜欢的东西：

<div class="row"> 
    <div class="col-xs-12 col-sm-4 text-left text-uppercase hidden-xs">Left Col</div> 
    <div class="col-xs-12 col-sm-4 text-center text-uppercase visible-xs">Left Col</div> 
    <div class="col-xs-12 col-sm-8 text-right hidden-xs">Right Col</div> 
    <div class="col-xs-12 col-sm-8 text-center visible-xs">Right Col</div> 
</div>

Example in Bootply

来源

2015-05-21 22:44:11

这里的cabey77的解决方案的延伸，具有多列大小，写的少能够与引导的变量更新支持。编译bootstrap时，需要包含这些内容。

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 

.customTextRight-xs{text-align:right;} 
.customTextLeft-xs{text-align:left;} 
.customTextRight-sm{text-align:center;} 
.customTextLeft-sm{text-align:center;} 
.customTextRight-md{text-align:center;} 
.customTextLeft-md{text-align:center;} 
.customTextRight-lg{text-align:center;} 
.customTextLeft-lg{text-align:center;} 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-sm-min) { 
    .customTextRight-xs{text-align:right;} 
    .customTextLeft-xs{text-align:left;} 
    .customTextRight-sm{text-align:right;} 
    .customTextLeft-sm{text-align:left;} 
    .customTextRight-md{text-align:center;} 
    .customTextLeft-md{text-align:center;} 
    .customTextRight-lg{text-align:center;} 
    .customTextLeft-lg{text-align:center;} 
} 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { 
    .customTextRight-xs{text-align:right;} 
    .customTextLeft-xs{text-align:left;} 
    .customTextRight-sm{text-align:right;} 
    .customTextLeft-sm{text-align:left;} 
    .customTextRight-md{text-align:right;} 
    .customTextLeft-md{text-align:left;} 
    .customTextRight-lg{text-align:center;} 
    .customTextLeft-lg{text-align:center;} 
} 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { 
    .customTextRight-xs{text-align:right;} 
    .customTextLeft-xs{text-align:left;} 
    .customTextRight-sm{text-align:right;} 
    .customTextLeft-sm{text-align:left;} 
    .customTextRight-md{text-align:right;} 
    .customTextLeft-md{text-align:left;} 
    .customTextRight-lg{text-align:right;} 
    .customTextLeft-lg{text-align:left;} 
}

来源

2015-12-13 16:13:09

Twitter Bootstrap 3条件.text-center

回答

相关问题