html - 堆叠/嵌套列 + Bootstrap 网格

Question

我一直无法在我的网站上设置简单的结构。我正在尝试使用 Bootstrap 的网格来组织内容。

我想要一个大栏(在左侧)来显示主要新闻。我想要右侧的两列用于其他菜单和主题。这是我尝试使用的代码……无济于事:

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