Css 引导行超出了包含列的范围

当我遇到以下问题时，我一直试图在引导中复制Quora的设计。在Quora的每个问题页面上，都有一个左侧边栏。因此，对于第一部分（标题为“想要答案”），我有以下结构：

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

18想要答案吗

左侧边栏有两列宽。现在，当图像显示时，每一行（水平突出显示）都扩展到

want answers

div（垂直蓝色突出显示）。为什么会这样？行不应该包含包含

col-lg-2

div的整个宽度吗

---

我不确定这是否是个问题，但请尝试像这样关闭图像标签：

在代码中没有尾随斜杠

实现所需功能的很大一部分与覆盖引导应用于行和列的默认填充和边距有关。通过以下修改，我能够包含图像并将其居中：

CSS:

HTML

18想要答案吗

---

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

col-sm-2 col-md-2

我不确定您是否有任何自定义CSS用于

\want answers

或

\left sidebar

，但一个问题是，4-32px图像通常会超出

col-lg-2

的宽度。将其更改为

img responsive

，以便根据需要缩小

<div class="col-lg-3">
   <img src="//placehold.it/350" alt="" width="32px" height="32px" class="img-responsive">
</div>

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

<div class="col-lg-3">
   <img src="//placehold.it/350" alt="" width="32px" height="32px" class="img-responsive">
</div>