将引导面板拉到列边框

Question

我有两个面板需要放置在它们所在列的左右最外层位置。目前它们看起来像这样：http://i.imgur.com/1fveLek.png

第一个面板应向左拉，以便与文本对齐，而另一个面板应向另一个方向拉，再次与文本对齐。我尝试使用“pull-right”和“pull-left”类，但这不起作用。

这是面板的 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 宽的列中。

Answer 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。