0

私はTwitterのブートストラップにかなり慣れていないので、2列のレイアウトを試してみ
ます。私のコードは次のとおりです。

<div class="container">
    <div class="row">
        <div class="span3 well">Content</div>
        <div class="span9 well">Content</div>
    </div>
<div>

残念ながら、2 番目の列は 1 列目の一番下に押し込まれています

ジャスフィドル

列のコンテナーを作成するrow-fluidと問題が解決するようですが、ブートストラップのマニュアルによると、クラスを持つ div コンテナーが必要ですcontainer-fluid

レイアウトを修正したいので、コンテナを流動的なコンテナとして動作させたくありません。
これを修正する方法はありますか？

4

2 に答える 2

1

行を使用している場合は、span3 および span9 div 内にウェルを配置する必要があります。

<div class="container">
    <div class="row">
        <div class="span3">
            <div class="well">Content</div>
        </div>
        <div class="span9">
            <div class="well">Content</div>
        </div>
    </div>
<div>

通常の行内で使用する場合は固定幅であるため、スパン div にパディングまたは境界線を追加すると、それらが折り返されます。

または、 Twitter Bootstrap - bordersに従って、境界線を考慮してそれに応じてマージンを減らすか、box-sizing プロパティを変更して、ブートストラップ css 自体を修正することもできます。ボックスのサイズ変更は、IE7 などの一部のブラウザーでは機能しないことに注意してください。

于 2013-04-19T18:51:52.227 に答える
1

Twitter Bootstrap では、.wellクラスにパディングがあり、スパン クラスのコンテンツに余分な幅が与えられます。

解決策は次のとおりです。

.well {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;    
}

http://jsfiddle.net/uAs6k/305/

于 2013-04-19T18:52:38.903 に答える