2

Bootstrap を使用して 2 列 (サイドバー - メイン) の全幅ページを作成する適切な方法は何でしょうか。例はほとんど見つかりませんでしたが、ほとんどが幅です。

私の試みは、単にオーバーライドすることでした:

html, body {
  margin:  0px;
  width:   100%;
  height:  100%;
}

sidebar {
  width:   200px;
  height:  100%;
}

ただし、これにより、小さな画面では懸念が生じます。2 列のページ レイアウトを実装する適切な方法は何でしょうか。管理パネルのレイアウトを作成しようとしています。

4

5 に答える 5

3

Bootstrap流体グリッドを使用できますか? 2 列の柔軟なレイアウトが作成されます。その後、Bootstrap レスポンシブを使用して、必要に応じて 1 つの列に折りたたむことができます。

それを行うための Bootstrap Web サイトのコード。

<div class="container-fluid">
 <div class="row-fluid">
   <div class="span2">
     <!--Sidebar content-->
   </div>
   <div class="span10">
     <!--Body content-->
   </div>
 </div> 
</div>

そしてフィドル：http://jsfiddle.net/MgcDU/3581/

于 2013-04-27T00:15:19.603 に答える
0

サイドバーを 200 ピクセルにハードコードする代わりに、パーセンテージ (20%) で設定してはいかがでしょうか。このようにして、ユーザーが小さい/大きい画面でページを拡大/縮小しても、サイドバーは常に一貫したままになります。

于 2013-04-27T00:10:32.657 に答える
0

私はそれをなんとかしましたが、まだ国境の問題があります.leftyと.contentの境界線がフッターの上にあります.理由がわからない.私はあなたの問題を解決しました.あなたは私のものを解決しますか. )

HTML :

<div class="container">


      <div class="row header">
      <div class="col-xs-12">col-xs-12</div>
      </div> <!-- End of header -->


      <div class="row content">
              <div class="col-xs-3 lefty">lefty</div>
              <div class="col-xs-9 content">content</div>
      </div> <!-- End of content -->

      <div class="row footer">
      <div class="col-xs-12">col-xs-12</div>
      </div> <!-- End of footer -->

CSS :

    html,body{
    height:100%;
    min-height:100%;
    width: 100%;
    min-width: 100%;
    margin: 0;
    padding:0;
}
.container {
    height:100%;
    width: 100%;
    min-width: 100%;
    margin:0;
    padding:0;
}
.full-height{
    width:100%;
    height:100%;
    min-height:100%;
    margin:0;
    padding:0;
}
.header{
    background-color: #333;
    border: 1px solid white;
    height: 10%;
    color: white;
    margin:0;
    padding:0;
}
.lefty{
    background-color: #333;
    border: 1px solid white;
    height: 80%;
    color: white;
    margin:0;
    padding:0;
}
.content{
    background-color: #333;
    border: 1px solid white;
    height: 80%;
    color: white;
    margin:0;
    padding:0;
}
.footer{
    background-color: #333;
    border: 1px solid white;
    height: 10%;
    color: white;
    margin:0;
    padding:0;
}

一番、

于 2014-03-13T08:12:52.217 に答える
0 
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

ここを参照してくださいhttp://twitter.github.io/bootstrap/scaffolding.html

于 2013-04-27T00:15:02.017 に答える
0

やるべきことは、メディアクエリを使用することです。

大きな画面ではサイドバーをフロートさせますが、小さな画面ではフロートさせず、コンテンツの下に並べます。

于 2013-04-27T02:12:26.953 に答える