图像没有排列应该在哪里?

时间:2013-02-20 23:07:42

标签: twitter-bootstrap fluid-layout

我一直在寻找答案,但似乎找不到任何东西(也许我使用错误的关键字)。我使用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>

这就是页面目前的样子。红色箭头表示徽标应该去的位置。 enter image description here

1 个答案:

答案 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;
}