堆叠/嵌套列+引导网格

Question

我一直有麻烦在我的网站上设置一个简单的结构。我试图使用引导程序的网格来组织内容。

我想要一个大的专栏（在左边）为主要新闻。我想要其他菜单和主题右边的两列。这是我已经尝试使用代码...无济于事：

<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

你可以试试这个：

.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>

这是参考链接：http://getbootstrap.com/getting-started/

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>