Bootstrap 2x2面板在瀏覽器更改寬度時不對齊

Question

所以我有4個面板，以2x2格式組織。 2個頂部面板連續排列，每個面板都在col-md-6類中。同爲底板，如下所示：

<div class="row"> 
    <div class="col-md-6 text-center"> 
     <div class="panel panel-default"> 
      <h2 id="panhd">Test 1</h2> 
     </div> 
    </div> 

    <div class="col-md-6 text-center"> 
     <div class="panel panel-default"> 
      <h2 id="panhd">Test 2</h2> 
     </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-6 text-center"> 
     <div class="panel panel-default"> 
      <h2 id="panhd">Test 3</h2> 
     </div> 
    </div> 

    <div class="col-md-6 text-center"> 
     <div class="panel panel-default"> 
      <h2 id="panhd">Test 4</h2> 
     </div> 
    </div> 
</div> 

我得到的問題是，當我改變瀏覽器的寬度，面板到這種佈局：

 [P] 
[P] 
    [P] 
[P] 

測試1和測試3面板div有CSS margin-left:50%和所有的面板類都具有width:50%和padding-left:10px這些屬性，這只是爲了讓它們看起來更好看。

我怎麼會代替它成爲這樣能夠讓他們進入形成

[P] 
[P] 
[P] 
[P] 

當改變瀏覽器的寬度/來自移動觀看，：

 [P] 
[P] 
    [P] 
[P] 

Answer 1

您可以使用xs-12，如果刪除無用​​餘量

<div class="row"> 
    <div class="col-md-6 col-xs-12 text-center"> 
     <div class="panel panel-default"> 
      <h2 id="panhd">Test 1</h2> 
     </div> 
    </div> 

    <div class="col-md-6 col-xs-12 text-center"> 
     <div class="panel panel-default"> 
      <h2 id="panhd">Test 2</h2> 
     </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-6 col-xs-12 text-center"> 
     <div class="panel panel-default"> 
      <h2 id="panhd">Test 3</h2> 
     </div> 
    </div> 

    <div class="col-md-6 col-xs-12 text-center"> 
     <div class="panel panel-default"> 
      <h2 id="panhd">Test 4</h2> 
     </div> 
    </div> 
</div>