我使用Bootstrap 3.0,似乎无法弄清楚如何在面板之间添加填充/空格.
<div class="row"> <div class="col-xs-4 panel"> <div class="panel-body"> <h4>First Cell</h4> </div> </div> <div class="col-xs-4 panel"> <div class="panel-body"> <h4>Second Cell</h4> </div> </div> <div class="col-xs-4 panel"> <div class="panel-body"> <h4>Third Cell</h4> </div> </div> </div>
我已经尝试添加一个类,并将宽度设置为30%,但只有在有两个面板并将其拉到右边时才有效.如果我添加了一个边距,那么它会抛出响应,而最后一个单元格会下降到下一行.
如何在面板之间加强差距呢?
解决方法
我会倾向于不结合.panel和.col *:
http://jsfiddle.net/isherwood/xTc7a/1/
<div class="row"> <div class="col-xs-4"> <div class=" panel"> <div class="panel-body"> <h4>First Cell</h4> </div> </div> </div> <div class="col-xs-4"> <div class=" panel"> <div class="panel-body"> <h4>Second Cell</h4> </div> </div> </div> <div class="col-xs-4"> <div class=" panel"> <div class="panel-body"> <h4>Third Cell</h4> </div> </div> </div> </div>