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的全部宽度吗？

enter image description here

Answer 1

我不确定这是否有问题，但请尝试关闭这样的图片代码：<img src="img/350x350.gif}" alt="" width="32px" height="32px"/> 在你的代码中没有斜杠。

实现您正在寻找的内容的很大一部分将与覆盖默认填充和边距（引导适用于行和/或列）有关。我能够包含图像并以下面的修改为中心： 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

Answer 2

我不确定您是否有#want-answers或#left-sidebar的自定义CSS，但有一个问题是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>

http://codeply.com/go/OtSvmYQfcX

Bootstrap行超出了包含列的范围

2 个答案: