css - Bootstrap 行扩展到包含列之外

Question

当遇到以下问题时，我一直试图在 Bootstrap 中复制 Quora 的设计。在 Quora 的每个问题页面上，说 this one , 有一个左侧边栏。所以对于第一部分(标题为“想要答案”)，我有以下结构:

<div class="col-lg-2">
    <div id="left-sidebar">
        <div id="want-answers">
            <p><small>18 WANT ANSWERS</small></p>
            <hr>
            <div class="row">
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
            </div>

            <div class="row">
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
            </div>
        </div>
        <!-- /#want-answers -->

左侧边栏是 2 列宽。现在，如图所示，每一行(水平突出显示)扩展 want-answers div(垂直蓝色突出显示)。为什么会这样？行不应该包含包含 col-lg-2 div 的整个宽度吗？

Answer 1

我不确定这是否是个问题，但请尝试关闭您的图片标签，如下所示:<img src="img/350x350.gif}" alt="" width="32px" height="32px"/> 在您的代码中没有尾部斜线。

实现您正在寻找的目标的很大一部分将与覆盖 Bootstrap 应用于行和/或列的默认填充和边距有关。通过以下修改，我能够包含图像并将它们居中: DEMO

CSS:

#left-sidebar {
text-align:center;
background:#ccc;
}
.min-width {
min-width:153px;
}
#want-answers {
background:#f1f1f1;
min-width:153px;
width:100%;
text-align:center;
}
.no-marg-pad {
padding:0;
margin:0;
}
.img-line {
background:#000;
width:100%;
min-width:153px;
}
.img-padding {
padding:0;
margin-bottom:10px;
}

HTML

<div id="left-sidebar" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 no-marg-pad min-width">
<div class="row no-marg-pad">
    <div id="want-answers" class="col-xs-12">
        <p><small>18 WANT ANSWERS</small></p>
    </div>
</div>
<div class="row no-marg-pad">
    <div class="img-line">
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
    </div>
</div>
<div class="row no-marg-pad">
    <div class="img-line">
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
    </div>

您可能需要了解的另一件事是定义中小型屏幕的列宽，例如col-sm-2 col-md-2