2017-03-27 13 views
-1

私はサイドバーとメインコンテンツを持っていますが、私のメインコンテンツの中には3行持ちたいと思っています。一番上の行は、メインコンテンツ全体に広がります。中央の行には、メインコンテンツにまたがる3つの列が等間隔で配置されています。一番下の行には2つの等間隔があります。ブートストラップカラム - ページまたはコンテナ?

コンテンツの私のレイアウトは私のCSSは、これらは私が試した私の行のコンテンツの内側に、ビューポートの100%の高さに及ぶ有する

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-1 sidebar"> 
    </div> 
    <div class="col-md-11 main-content"> 
    </div> 
    </div> 
</div> 

ある場合 - 1.別の.container流体をネストメインコンテンツの内側に配置し、上、中、下の行ごとに新しい行を作成しますか? 私の試みから、これは動作しませんでした。私が別のコンテナの中にコンテナを入れようとしていると信じています。私が間違っていて、別のコンテナの中にコンテナを入れ子にすることができるのであれば、メインコンテンツ内のそのコンテナには12の新しい列がありますか?または、.main-contentがすでに使用している11個の列から作業していますか?

私の他の試みは - でした2.行にまっすぐ行く(他の.containerでは入れ子になっていませんが、私がこのことをしたとき、私は行全体を.main-content = "col-md-11")。私の中行(一番上の行の下にあった二番目の行)は最初の行の右にありました。行互いの上が、これはどちらか動作しませんでした。私は同じ.container流体に.sidebarと.main-コンテンツを置くべきではありません

は私が?この間違ったにアプローチしましたか?

+1

写真を撮るのは難しい。メインコンテンツでより完全な例ができますか? – ZimSystem

答えて

0
<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-1 sidebar"></div> 
     <div class="col-md-11 main-content"> 

     <div class="row"> 
      <div class="col-md-12"></div> 
      </div> 
      <div class="row"> 
      <div class="col-md-4"></div> 
      <div class="col-md-4"></div> 
      <div class="col-md-4"></div> 
      </div> 
      <div class="row"> 
      <div class="col-md-6"></div> 
      <div class="col-md-6"></div> 
      </div> 
     </div> 
     </div> 
    </div> 
関連する問題