引導面板未對齊

Question

我正在嘗試正確對齊Bootstrap面板的多列和多行。

抱歉，如果這是一個簡單的問題，那么我對Bootstrap還是陌生的，對於CSS + HTML還是很陌生的。

這是一個面板的代碼；

<div class="row">
    <div class="col-sm-3">
        <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Overall</h3>
            </div>
            <div class="panel-body">
                 Panel Body.
            </div>
        </div>
    </div>

復制這個，我們得到兩個並排。 但是，如果我們在末尾添加一個額外的</div> ，則下一個將出現在新行上，但沒有對齊。 我想要與此類似的布局；

X X X X
X X X X
X X X X
X X X X

以下是屏幕快照在未對齊時的外觀： http : //i.imgur.com/t030kVU.png

感謝您提供的任何幫助，我敢肯定這很簡單。

Answer 1

我真的沒有看到這個問題。 您的加價對我來說似乎不錯。 如果需要新行，只需將面板放到新行：)

<div class="row">
<div class="col-sm-3">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Overall</h3>
        </div>
        <div class="panel-body">Panel Body.</div>
    </div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Overall</h3>
        </div>
        <div class="panel-body">Panel Body.</div>
    </div>
</div>
</div>

看到這個簡單的小提琴： http : //jsfiddle.net/anup1986/4m0xfzz2/