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

你可以这样做。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以试试这个：

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

Stacked / Nest Columns + Bootstrap Grid

2 个答案: