Bootstrap 3-减少 <div> 小型设备的电话的宽度正确（&lt;768px）

Question

添加了Bootstrap 3后，有一个代码：

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

或在jsFiddle中查看

文本应居中，并在一行中，宽度为768 + px，并在文本中居中，并在两行中​​（ bbbbbbbbbb text2在aaaaaaa text1以下），不超过767px。

是否可以使用纯Twitter Bootstrap类正确执行此操作？

我可能应该提到的是，上面的代码存在的问题是，对于非常小的宽度，文本会变成四行（不好！），尽管宽度允许它变宽。 它需要分成两行，而不是四行。 此外，它停止居中放置767像素。

Answer 1

看来您实际上并不了解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>

使用引导程序时，您无需设置宽度即可获得额外的样式！ 但是对于额外的自定义设置（例如仅768px +屏幕上的text-align:center ，则必须编写媒体查询，如我上面所述

Answer 2

引导程序3中为此提供了一个类。 这是col-xs类。 请参阅此参考Bootstrap媒体查询

当屏幕低于768px时，您需要2行2格。 对于这两个2 div，添加类col-xs-12和text-center类。 你也有当DIV较大增加额外的COL-SM-6类（也许COL-MD COL-LG类更高的屏幕取决于您希望如何显示它们。）这是小提琴