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類更高的屏幕取決於您希望如何顯示它們。）這是小提琴