Bootstrap 3 - 适当减少超小型设备手机 (<768px) 的 <div> 宽度

Question

加上Bootstrap3，就有一个密码：

<style>
div{
text-align:center;
}
div > div {
border:1px solid green;
    display:inline-block;
}
</style>
<div class="col-xs-6 col-sm-12" style=" border:1px solid red;">
    <div>aaaaaaa text1</div>
    <div>bbbbbbbbbb text2</div>
</div>

or see it in jsFiddle here

对于 768+px 的宽度，文本应居中并在一行中，对于 767px 或更小的文本应居中并在两行中（bbbbbbbbbb text2 below aaaaaaa text1）。

是否可以使用纯 Twitter Bootstrap 类正确地做到这一点？

我可能应该提到上面代码的问题是，对于非常非常小的宽度，文本变成四行（糟糕！），尽管宽度允许使其更宽。需要分两行，尽量不要四行。此外，它停止以 767 像素为中心。

Answer 1

bootstrap3 中有一个class。是 col-xs class。请参阅此参考 Bootstrap media queries

当屏幕低于 768px 时，您需要 2 divs 在 2 行中。对于这两个 div 添加 class col-xs-12 和 text-center class。此外，当 div 较大时，您还必须添加一个额外的 col-sm-6 class （对于更高的屏幕，可能 col-md col-lg classes 取决于您想要的方式让他们看。）这是 fiddle

Answer 2

看来你其实并不知道bootstrap的威力，尤其是col结构

这是解决方案

<style>
@media (max-width: 768px) {
  div{
    text-align:left;
  }
}
div {
  text-align:center
}
</style>
<div class="col-xs-6 col-sm-12" style=" border:1px solid red;">
    <div class="col-xs-12 col-sm-6">aaaaaaa text1</div>
    <div class="col-xs-12 col-sm-6">bbbbbbbbbb text2</div>
</div>

使用 bootstrap 时不需要额外的样式来设置宽度！！但是对于像 768px+ 屏幕中的 text-align:center 这样的额外自定义，你必须编写媒体查询，正如我在上面写的那样

Bootstrap 3 - 适当减少超小型设备手机 (<768px) 的 <div> 宽度

Bootstrap 3 - reduce <div> width for Extra small devices Phones (<768px) properly

html

css

mobile-devices

twitter-bootstrap