0

ここに画像の説明を入力してくださいレスポンシブCSSファイルが含まれているTwitterBootstrapの実装で忙しいですが、これによりスパンに問題が発生します。全幅はspan12までであると想定されており、6*span2も同じように動作するはずです。

ここに面白い部分があります。bootstrap-sensitive.cssがロードされていない場合は機能しますが、レスポンシブファイルをロードした瞬間、最後のスパンが左下に浮きます。

最初はその周りの境界線かもしれないと思っていたのですが、それを取り除くと、まだ底に浮かんでいます。

            <div class="row" style="border: 1px solid green">
                <div class="container" style="border: 1px solid blue">
                    <div class="span2" style="border: 1px solid red">Foo!</div>
                    <div class="span2" style="border: 1px solid red">Bar!</div>
                    <div class="span2" style="border: 1px solid red">Baz!</div>
                    <div class="span2" style="border: 1px solid red">Foo!</div>
                    <div class="span2" style="border: 1px solid red">Bar!</div>
                    <div class="span2" style="border: 1px solid red">Baz!</div>
                </div>
            </div>

両方のCSSファイルをロードして、適切なレイアウトを取得できるはずですよね？いいえ？

同様の結果を示す他の質問を見つけることができません。私のBootstrapCSSファイルは変更されておらず、自分のスタイルシートがまだ組み込まれていないので、それが私が間違ったことだとは思いません。

何か案は？

ありがとう！

コブス

編集：詳細については、スクリーンショットをアップロードしてください。

4

1 に答える 1

1

以下のコードを試してみてください。bootstrap-sensitive.cssの使用に問題はないはずです。

<div class="row" style="border: 1px solid green">
  <div class="container" style="border: 1px solid blue; width:100%">
   <div class="span2" style="border: 1px solid red">Foo!</div>
   <div class="span2" style="border: 1px solid red">Bar!</div>
   <div class="span2" style="border: 1px solid red">Baz!</div>
   <div class="span2" style="border: 1px solid red">Foo!</div>
   <div class="span2" style="border: 1px solid red">Bar!</div>
   <div class="span2" style="border: 1px solid red">Baz!</div>
</div>
</div>

アップデート：

<div class="row-fluid" style="border: 1px solid green">
<div class="container" style="border: 1px solid blue">
<div class="span2" style="border: 1px solid red">Foo!</div>
<div class="span2" style="border: 1px solid red">Bar!</div>
<div class="span2" style="border: 1px solid red">Baz!</div>
<div class="span2" style="border: 1px solid red">Foo!</div>
<div class="span2" style="border: 1px solid red">Bar!</div>
<div class="span2" style="border: 1px solid red">Baz!</div>
</div>
</div>
于 2012-12-02T13:49:42.630 に答える