我需要将两个面板放在他们所在列的左右最外侧位置。目前他们看起来像这样:http://i.imgur.com/1fveLek.png
第一个面板应向左拉,以便与文本对齐,而另一个面板应向另一个方向拉动,再次与文本对齐。我尝试使用“向右拉”和“向左拉”类,但这不起作用。
这是面板的HTML:
<div class="col-sm-6">
<div id="panelAddresse" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Addresse</h3>
</div>
<div class="panel-body">
<p><strong>Berberisvej 90, Hune</strong></p>
<p><strong>9492 Blokhus</strong></p>
</div>
</div>
</div>
<div class="col-sm-6">
<div id="panelLinks" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Links</h3>
</div>
<div class="panel-body">
<p><a href="https://www.krak.dk/scripts/ruteplan/krakdk_ruteplan_forside.asp">Kraks Ruteplan</a></p>
<p><a href="http://www.visitjammerbugten.dk/jammerbugten/blokhus-hune">Turistbureau</a></p>
</div>
</div>
</div>
这两列嵌套在另一个6宽的列中。
答案 0 :(得分:1)
你的代码就是这样的
<div class="row">
<div class="col-sm-6">
TEXT CONTENT
<div class="col-sm-6">
Panel
</div>
<div class="col-sm-6">
Panel
</div>
</div>
</div>
如果是这样,您应该将其更改为
<div class="row">
<div class="col-sm-6">
TEXT CONTENT
<div class="row">
<div class="col-sm-6">
Panel
</div>
<div class="col-sm-6">
Panel
</div>
</div>
</div>
</div>
所以即使是.col-sm-6填充(15px - 15px)也有额外的div.row。结构应该始终是.col-sm-X在.row div中。 Bootstrap中的列div在左侧和右侧总是有15px填充,在这种情况下会创建一个“双填充”,因为列div位于列div之下。