将 bootstrap 个面板拉到列边框

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>

所以还有额外的 div.row 甚至 .col-sm-6 填充 (15px - 15px)。该结构应始终使 .col-sm-X 位于 .row div 内。 Bootstrap 中的列 div 始终在左侧和右侧填充 15px，在本例中会创建一个 "double padding"，因为列 div 就在列 div 的下方。

将 bootstrap 个面板拉到列边框

Pull bootstrap panels to column border

html

panel

alignment

web

twitter-bootstrap