列布局逻辑引导程序3

Question

采取以下example bootstrap layout。

<div class="col-xs-7">
  <div class="row">
    <div class="col-md-3 a">col 3</div>
    <div class="col-md-9 a">col 9</div>
  </div>
</div>
<div class="col-xs-5 a">
  col 5
</div>


<div class="col-xs-7">
  <div class="row">
    <div class="col-md-3 b">col 3</div>
    <div class="col-md-9 b">col 9</div>
  </div>
</div>
<div class="col-xs-5 b">
  col 5
</div>

这里的第一行正是我所需要的，理想情况下不能改变。 （如果我可以通过更有效的布局获得类似的结果，那我就是耳朵。）

第二行但是我想只有2个部分。最左边的第4列基本上是空的空间。右边的所有内容都需要是一列 - 因此第二行的col 9和col 5需要合并。我不确定如何实现这个......

我需要这个的原因是右侧与第一行第9列的开头对齐。像这个手动编辑的示例图片; 红色部分是我想要的单个列。

Answer 1

也许它可以简化为

<div class="row">
  <div class="col-md-2 a">col 2</div>
  <div class="col-md-5 a">col 5</div>
  <div class="col-md-5 a">col 5</div>
</div>


<div class="row">
  <div class="col-md-2 b">col 2</div>
  <div class="col-md-10 b">col 10</div>
</div>

Answer 2

我认为以下是你想要的，用这个替换第二个col-xs-7：

<div class="col-xs-7">
   <div class="row">
       <div class="col-md-3 b">col 3</div>
       <div class="col-md-9 b">col 9</div>
   </div>
</div>