我一直在寻找答案,但似乎找不到任何东西(也许我使用错误的关键字)。我使用Bootstrap与以下网格系统。 22个网格,每个47px宽,每个网格之间的边距为0。这意味着每4个网格我总共188px。每4个网格包含两个图像,一个1px垂直条和一个187px标识。
这应该足以并排显示两个图像,但徽标会被打倒。如果我将class="pull-left"
放在垂直条上,徽标将返回到它们应该到达的位置,直到我缩小浏览器窗口的大小以使流体行调整大小。
起初我认为它可能只是列的容差/舍入问题所以我使我的图像缩小了5px,但没有改变任何东西。可能导致此问题或如何解决问题的任何想法?唯一适用于此的css是标准bootstrap.css
样式表,最大主体宽度为1040px。
<div class="row-fluid ">
<div class="span4 offset1">
<img src="img/verticalBar.jpg">
<img src="img/logo1.jpg">
</div>
<div class="span4">
<img src="img/verticalBar.jpg">
<img src="img/logo2.jpg">
</div>
<div class="span4">
<img src="img/verticalBar.jpg">
<img src="img/logo3.jpg">
</div>
<div class="span4">
<img src="img/verticalBar.jpg">
<img src="img/logo4.jpg">
</div>
<div class="span4">
<img src="img/verticalBar.jpg">
<img src="img/logo5.jpg">
<img src="img/verticalBar.jpg">
</div>
</div>
这就是页面目前的样子。红色箭头表示徽标应该去的位置。
答案 0 :(得分:-1)
尝试将此添加到您的css:
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}