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/

Bootstrap面板未对齐

1 个答案: