ブートストラップでマスター詳細ページを設定するには？

Question

私は私が取得しようとしている特定のレイアウトの画像を添付していますブートストラップ3を使用して、「マスター詳細」ビューを設定するトラブルを抱えている：

私はとdiv要素を作成しました.rowに、ヘッダーの12列にまたがってdiv.rowとdiv.col-md-4とdiv.col-md-8の2つの列があります。しかし、明らかに、これは私が探しているものを達成するものではありません。私はposition属性で試してみましたが、それはBootstrap CSSと競合しているようです。私はいつも混乱したテキストを取得します。

ご連絡いただきありがとうございます。私が探しているものについて詳細をお知らせしたい場合は、お知らせください。うまくいけば、写真は明らかです。あなたは

position: fixed; 

を探している

Answer 1

これは、要素は常にビューポートに静的な相対的なものであることを保証します。その後、相対的な配置プロパティを使用して、配置したい場所に配置します。

トップ要素について

（たとえば、あなたのナビゲーションバー）、あなたが設定することができます。

top: 0; 

を下の要素については、次のように設定します。

bottom: 0; 

ので、このような何か：

.row, .col-md-4, .col-md-8 { 
 
    border: 2px solid pink; /* For showing the div borders */ 
 
} 
 

 
.row.main-content { 
 
    background-color: blue; 
 
    height: 300px; 
 
    margin-top: 20px; /* Needs to match the height of .row.top */ 
 
} 
 

 
.row.top { 
 
    position: fixed; 
 
    top: 0; 
 
    height: 20px; 
 
    width: 100%; 
 
    background-color: red; 
 
    z-index: 9999; 
 
} 
 
    
 
.row.bottom { 
 
    position: fixed; 
 
    bottom: 0; 
 
    height: 20px; 
 
    width: 100%; 
 
    background-color: green; 
 
    z-index: 9999; 
 
} 
 

 
.scrollable { 
 
    overflow-y: scroll; 
 
    height: 300px; /* May need to be set somehow */ 
 
    }

<div class="container-fluid"><!-- To get it to take up the whole width --> 
 
     
 
     <div class="row top"> 
 

 
     </div><!-- row --> 
 

 
     <div class="row main-content"> 
 
     
 
     <div class="col-md-4"> 
 
     
 
      <div class="sub-header"> 
 
      </div> 
 

 
      <div class="scrollable"> 
 
       <!-- menu items here --> 
 
      </div> 
 

 
      <div class="sub-footer"> 
 
      </div> 
 

 
     </div> 
 

 
     <div class="col-md-8 scrollable"> 
 
      <!-- Product detail goes here --> 
 
     </div> 
 

 
     </div><!-- row --> 
 

 
     <div class="row bottom"> 
 

 
     </div><!-- row bottom --> 
 

 
    </div><!-- container-fluid -->

希望に役立ちます。