Question

我正在使用Bootstrap 3.我有两行。第一行有4x3列。第二行有一列3和1列9. 9列的高度是所有其他列的两倍。我想在第二行的第3列下面添加一列。我已经制作了一张图片来解释它。

绿色在一排，紫色在一排。我试图将黄色放在它自己的行中，但是它显示在左边但不是在小紫色块的底部。我还把小紫色和黄色的块放在同一行上，但是它们彼此相邻显示，下面是90块。

Answer 1

为什么你不遵循这个

<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
</div>
<div class="row">
    <div class="col-md-3">
        <div class="row">
            <div class="col-md-12"></div>
            <div class="col-md-12"></div>
        </div>
    </div>
    <div class="col-md-9">
        <div class="col-md-12"></div>
    </div>
</div>

以后你可以用css

来欺骗它

Answer 2

Bootstrap网格系统控制列宽但不控制高度。您可以使用预期的网格图案实现所需的布局，并使用高度规则使底边齐平。

http://jsfiddle.net/rblakeley/ruggnzvq/

<html>
<head>
  <title>Bootstrap grid example</title>

  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

  <style type="text/css">

    div[class^="col"] { height: 40px; text-align: center; border: 1px dashed red; background: #fcc;}
    .row:nth-child(2) div[class^="col"] { background: #cfc;}
    .row:nth-child(2) > div[class^="col"]:first-child { border: none;}
    .row:nth-child(2) > div[class^="col"]:nth-child(2) { height: 100px;}
    .row:nth-child(2) .row div[class^="col"]:nth-child(2) { height: 60px; background: #ccf;}

  </style>

</head>
<body>

<div class="container-fluid">

  <div class="row">
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
  </div>
  <div class="row">
    <div class="col-xs-3">
      <div class="row">
        <div class="col-xs-12">3</div>
        <div class="col-xs-12">3</div>
      </div>
    </div>
    <div class="col-xs-9">9</div>
  </div>

</div>
</body>
</html>

在Bootstrap中如何获得两个不同尺寸的行

2 个答案: