Question

我确定我在脑海中过度复杂，但是使用标准bootstrap 3网格系统可以实现以下布局吗？

标题和子标题可以填充12列。然后Image，可能是固定的高度，跨越8-col然后是横跨4-col的侧杆。问题是侧栏的高度不确定，图像的下方是内容。

到目前为止有类似的事情：

<div class="col-xs-12">
  <h1>Header</h1>
</div>
<div class="row">
 <div class="col-md-8">
    image
 </div>
 <div class="col-md-4">
   Navigation down right
 </div>
 <div class="col-sm-8">
    Content
 </div>
</div>

Layout

Answer 1

Bootstrap行只有十二个跨度。我看到8 + 4 + 8 = 20＆gt; 12，所以＆＃34;内容＆＃34; div将处于新的一线......

你不能将col-sm-x与col-md-x放在同一行......

我的建议：分成两行

   <div class="col-xs-12">
     <h1>Header</h1>
   </div>
   <div class="row">
       <div class="col-md-8">
           image
       </div>
       <div class="col-md-4">
            Navigation down right
       </div>
   </div>
   <div>
       <div class="col-sm-8">
           Content
       </div>
   </div>

但如果你想把它们全部放在同一行：

   <div class="col-xs-12">
     <h1>Header</h1>
   </div>
   <div class="row">
       <div class="col-md-5">
           image
       </div>
       <div class="col-md-2">
            Navigation down right
       </div>
       <div class="col-md-5">
           Content
       </div>
   </div>

如果你想要一个侧面部分，你可以级联行：

   <div class="col-xs-12">
       <h1>Header</h1>
   </div>
   <div class="row">
       <div class="col-md-8">
           <div class="row">
               <div class="col-md-12">
                   Image
               </div>
           </div>
           <div class="row">
               <div class="col-md-12">
                   Content
               </div>
           </div>
       </div>
       <div class="col-md-4">
            Navigation down right
       </div>
   </div>

Answer 2

根据你的形象

OP's image

您应该使用以下布局（单击“整页”按钮以查看它的实际效果。另外，忽略CSS。它仅用于测试目的）：

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);

[class*='col-'] > div:not(.row) {
  background: #DDD;
  margin: 0.25em 0;
  padding: 0.5em;
  text-align: center;
  height: 5em;
}
.red [class*='col-'] > div:not(.row) {
  background: #C55;
  color: #FFF;
  height: auto;
}

[class*='col-sm-4'] > div:not(.row) {
  height: 9em;
}

<div class="container">
  <div class="red row">
    <div class="col-sm-12">
      <div>HEADER</div>
    </div>
    <div class="col-sm-8">
      <div>SUB HEADER</div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-8">
      <div class="row">
        <div class="col-sm-12">
          <div>IMAGE</div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <div>LEFT COL</div>
        </div>
        <div class="col-sm-6">
          <div>RIGHT COL</div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div>SIDEBAR</div>
    </div>
  </div>
</div>

基本上，您需要一个具有6个宽列的嵌套行，用于12列网格布局。

侧栏有不确定的高度和错位的图像

2 个答案: