0

私は答えを探しましたが、何かを見つけることができないようです（間違ったキーワードを使用している可能性があります）。次のグリッド システムで Bootstrap を使用しています。22 個のグリッド、各 47 ピクセル幅、各グリッド間のマージンは 0 です。つまり、4 グリッドごとに合計 188 ピクセルになります。各 4 つのグリッドには、1 ピクセルの垂直バーと 1 つの 187 ピクセルのロゴの 2 つの画像が含まれます。

これは、両方の画像を並べて表示するのに十分なはずですが、ロゴが蹴られ続けます. 垂直バーを配置 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>

これが現在のページの外観です。赤い矢印は、ロゴがどこに行くべきかを示しています。 ここに画像の説明を入力

4

1 に答える 1

-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;
}
于 2013-02-20T23:15:30.633 に答える