0

ブートストラップ 2.3.2 を使用する Web ページを維持していますが、次の問題に遭遇しました。ページはサイドバーとメイン コンテナーに分割され、メイン コンテナー内には流動的な行があります。これらの行は、サイドバーのコンテンツによって下にシフトされます。なぜこれが起こっているのかを説明したり、回避策を提案したりできますか? 以下にいくつかのコードを示します。

HTML:

<div class="container-fluid">
<div class="left-div">
    <p>Some content here</p>
    <ul class="nav nav-list">
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
    </ul>    
</div>
<div class="right-div">
    <div class="row-fluid">
        <div class="span6">
            <h3>Stuff here</h3>
        </div>
        <div class="span6">
            This row gets stretched vertically
        </div>
    </div>
    <div class="row-fluid">
        <p>This content gets pushed down</p>
    </div>
</div>   
</div>

CSS:

.left-div {
  width: 200px;
  background-color: #DDDDDD;
  float: left;
}

.right-div {
  margin-left: 220px;
  border-color: #DDDDDD;
  border-width: 2px;
  border-radius: 3px;
  border-style: solid;
  padding: 25px;
}
4

2 に答える 2

1

まず、ピクセルを % と混ぜないでください (流体は % です)。ブートストラップ グリッドを使用してみてください。

.right-div {
  /* --> margin-left: 220px; <-- */
  border-color: #DDDDDD;
  border-width: 2px;
  border-radius: 3px;
  border-style: solid;
  padding: 25px;
}


.left-div {
  /* --> width: 200px; <-- */
  background-color: #DDDDDD;
  /* --> float: left; <-- */
}

フロート左が問題です！流動的な行でフロートを使用したり、クリアフィックスのあとがきを使用したりしないでください。流動的な行は浮動を頻繁に使用すると思います...また、マージン左が問題です。右のdivは多少浮動していますが、実際にはそうではありません。

于 2013-09-06T12:26:10.907 に答える
0

コンテナ流体を使用している場合は、すべての値をピクセルではなく % で指定し、float、border-left プロパティを削除して、div をスパン要素内に適切に配置することをお勧めします。 rightdiv leftdiv クラスは必要ありません。左のコンテンツを配置するだけです。内側 (span3) と内側 (span9) の右側のコンテンツ。ほんの一例です..

于 2013-09-06T12:39:09.863 に答える