スタック/ネスト列+ブートストラップグリッド

Question

私のウェブサイトで簡単な構造を設定するのに問題がありました。私はブートストラップのグリッドを使ってコンテンツを整理しようとしています。

メインニュースのために1つの大きな列（左側）が必要です。私は他のメニューやトピックのために2つの列を右にしたい。これは私が使用しようとしたコードです...無駄に：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <div class="col-md-8"> 
       <p>Testing</p> 
       </div> 
       <div class="col-md-4"> 
       <p>Testing</P> 
       </div> 
      </div> 
      <div class="row"> 
      <div class="col-md-4 col-md-offset-8"> 
       <p>Testing</p> 
      </div> 
      </div> 
     </div> 
    </div> 

は、これを行うための簡単な方法はありますか？私はこれが最も単純な解決策ではないと感じています。そして、それは私が望んでいる方法でさえも動作しません。何か案は？ お時間をありがとう！

Answer 1

あなたはこれを試すことができます。http://getbootstrap.com/getting-started/

：

.main{ 
 
    border:1px solid #000; 
 
} 
 
.side .col-sm-12 { 
 
    background:green; 
 
    border:1px solid red 
 
} 
 
.row-eq-height { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display:   flex; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row row-eq-height"> 
 
    <div class="col-sm-8 main"> 
 
     <div class=""> 
 
     
 
     
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> 
 
    </div> 
 
    <div class="col-sm-4 side"> 
 
     <div class="row"> 
 
     <div class="col-sm-12">  
 
     It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. 
 
</div> 
 
     <div class="col-sm-12">  
 
     It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. 
 
     </div> 
 

 
     </div> 
 
     
 
</div> 
 
    </div> 
 
    </div>

これは、参照リンクです

Answer 2

このようにすることができます。

* { 
 
    padding: 0 !important; 
 
} 
 
.big-div, .small-div { 
 
    border: 2px solid red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="col-xs-8 big-div"> 
 
    <span>bigdiv</span> 
 
    </div> 
 
    <div class="col-xs-4 small-div-container"> 
 
    <div class="col-xs-12 small-div"> 
 
     <span>smalldiv1</span> 
 
    </div> 
 
    <div class="col-xs-12 small-div"> 
 
     <span>smalldiv2</span> 
 
    </div> 
 
    </div> 
 
</div>