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>

or see it in jsFiddle here

文本应居中并且在一行中，宽度为768 + px，并且居中并且在两行（bbbbbbbbbb text2以下aaaaaaa text1）中为767px或更少。

是否可以正确使用纯Twitter Bootstrap课程？

我可能应该提到上面代码的问题是，对于非常小的宽度，文本变成四行（坏！），尽管宽度允许使其更宽。它需要分为两行，而不是四行。此外，它停在767-px的中心位置。

Answer 1

您似乎真的不知道引导程序的强大功能，尤其是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时，没有额外的样式来设置宽度！但是对于像text-align:center +屏幕中的768px这样的额外自定义，那么你必须编写媒体查询，如上所述

Answer 2

为此，bootstrap 3中有一个类。这是col-xs类。请参阅此参考 Bootstrap media queries

当屏幕低于768px时，您需要2行中的2个div。对于这两个2 div，添加类col-xs-12和text-center类。此外，当div较大时，您还必须添加一个额外的col-sm-6类（对于更高的屏幕，可能需要col-md col-lg类取决于您希望如何显示它们。）这是fiddle

Bootstrap 3 - 正确减少<div>宽度以获得超小型设备电话（<768px）</div>

2 个答案: