Question

我是Bootstrap的初学者，我不知道如何做我需要的事情。

我想做这个设计。

问题在于我无法制作DIV 5.我尝试了几种方法，但我得到的最多的是：

这是我的代码：

<div class="container">
    <div class="row">
        <div class="col-md-12">DIV TITLE
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">DIV 1
        </div>
        <div class="col-md-4" style="border-bottom:none">DIV 2
        </div>
        <div class="col-md-2" style="border-bottom:none">DIV 3
        </div>
        <div class="col-md-2" style="border-bottom:none">DIV 4
        </div>
        <div class="col-md-2">
            <div id="heighter">
            DIV 5:<br>
            INFO<br>
            MORE INFO<br>
            MORE INFO
            MORE INFO
            MORE INFO
            MORE INFO
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">DIV 5
        </div>
        <div class="col-md-2">DIV 6
        </div>
        <div class="col-md-2">DIV 7
        </div>
        <div class="col-md-2">DIV 8
        </div>
        <div class="col-md-2">DIV 9
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">DIV 10
        </div>
        <div class="col-md-2">DIV 11
        </div>
        <div class="col-md-2">DIV 12
        </div>
        <div class="col-md-2">DIV 13
        </div>
        <div class="col-md-2">DIV 14
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">DIV 15
        </div>
        <div class="col-md-6">DIV 16
        </div>
        <div class="col-md-2">DIV 17
        </div>
    </div>
</div>

http://jsfiddle.net/drlynch/1m8orsud/

由于

Answer 1

这是您可以使用的一个想法。我没有做完整的例子，但你应该能够做你想做的事。这个想法是使用嵌套容器，如jsfiddle：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">DIV TITLE
        </div>
    </div>
  <div class="row">
    <div class="col-xs-10 container-fluid">
      <div class="row">
        <div class="col-xs-4">DIV 1
        </div>
        <div class="col-xs-4" style="border-bottom:none">DIV 2
        </div>
        <div class="col-xs-2" style="border-bottom:none">DIV 3
        </div>
        <div class="col-xs-2" style="border-bottom:none">DIV 4
        </div>  
      </div>
      <div class="row">
        <div class="col-xs-4">DIV 12
        </div>
        <div class="col-xs-4" style="border-bottom:none">DIV 22
        </div>
        <div class="col-xs-2" style="border-bottom:none">DIV 32
        </div>
        <div class="col-xs-2" style="border-bottom:none">DIV 42
        </div>  
      </div>
    </div>
    <div class="col-xs-2">
        <div id="heighter">
            DIV 5:<br>
            INFO<br>
            MORE INFO<br>
            MORE INFO
            MORE INFO
            MORE INFO
            MORE INFO
            </div>
        </div>
    </div>
</div>

Bootstrap 3.3 - 列中的行，向下嵌套

1 个答案: