引导面板未对齐

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/