14

twitter-bootstrap フレームワークを使用してアプリケーションの管理パネルを設計しようとしていますが、レイアウトが機能しません。

私はこのデザインに触発されました: ここに画像の説明を入力
「サイドバー」と「メイン コンテンツ」の 2 列のレイアウトになりますが、100% の高さを機能させることができません。このコードを使用して、幅 100% の 2 列のレイアウトを取得できました。

HTML

<div class="container-fluid">
 <div class="row-fluid">


   <div class="span2 colorize-white">
     <!--Sidebar content-->Sidebar
   </div>


   <div class="span10 colorize-white">
     <!--Body content-->Main
   </div>


 </div> 
</div>

CSS 

/* Global */
html, body {
    color: #6B787F;
    padding: 0;
    height: 100%;
    background: #11161a;
    font-family: 'PT Sans' !important;
}

.colorize-white {
    background: #FFFFFF;
}

.no-margin {
    margin: 0;
}

道半ばですが、解決できないことが 2 つあります。
1) 100% 高さ
2) 2 番目の画像の外側の余白を取り除く

ここに画像の説明を入力 ブラウザーの境界線とサイドバー/メイン要素の間にマージンがあり、2 つの間にマージンがあることがわかります。body タグを含めて貼り付けた HTML のすべての要素にマージンを追加しない場合、これを取り除く必要があります。サイドバーとメイン コンテンツの間の余白スペースがなくなります。

4

3 に答える 3

7

Bootstrap のグリッド モデルが、ここで探しているものかどうかはわかりません。代わりに絶対位置を探しているかもしれません。例えば：

#sidebar, #content {
    position: absolute;
    top: 0;
    bottom: 0;
}
#sidebar { left: 0; width: 10em; }
#content { left: 10em; right: 0; }

やってみて。

于 2013-04-27T23:51:11.147 に答える
6

Bootstrap 3 で動作する例を次に示します。

HTML と本文の両方が 100% の高さであることを確認してください。サイドバーとコンテンツをラップしてから、サイドバーで使用position:absoluteします。

http://www.bootstrapzero.com/bootstrap-template/basis

コード: http://bootply.com/86704

于 2014-01-17T11:05:07.200 に答える
1

これがあなたが探しているものかどうかはわかりませんが、ここにあります。

CSSを少し変更しただけです。タグ付けmargin:0;します。html, body

于 2013-04-27T23:47:18.067 に答える