将自举面板拉到列边框

时间:2017-08-10 11:17:40

标签: html twitter-bootstrap web alignment panel

我需要将两个面板放在他们所在列的左右最外侧位置。目前他们看起来像这样: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宽的列中。

1 个答案:

答案 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之下。