使用Bootstrap绘制复杂网格

Question

我正在使用Bootstrap3处理HTML视图。我需要创建一个包含不同单元格的模板，我通常使用cols和rows，但这次我在绘制一列时遇到问题。

这是我需要的方案：

这是代码：

<div class="row">
  <div class="col-md-3 doubleHeight"></div>
  <div class="col-md-9 singleHeight"></div>
  <div class="col-md-3 singleHeight"></div>
  <div class="col-md-3 singleHeight"></div>
  <!--column bottom right-->
  <!--column bottom left-->
</div>

当我尝试在右下方绘制列时，问题就开始了。如果我在两个col-md-3之后绘制它，它不允许我显示左边的最后一列。如果我在左边的最后一列之后绘制它，它就不会占据上面的空间。 您对可能的解决方案有任何想法吗？ 感谢。

Answer 1

警告：此帖子包含解释之间相同代码段的多种变体，以演示逻辑并提供代码实际操作方式的直观表示。如果你编辑它，请记住这一点。

在我给你解决方案之前，我想要明确完美，这是Bootstrap框架支持的 NOT 。为了澄清，Bootstrap支持包含可用于解释此问题的块，但是， NOT 操纵height以容纳跨越多行的块。

好吧，说到这个，您可以通过column wrapping获取您的请求。您不能执行多个块的层，因为您拥有属于两个不同父级的块，并且根本无法使用当前的CSS / HTML结构进行量化。此外，您无法执行任何操作，最后一个块将显示在右下方的块旁边。

这里有一个结构的小演示，可以满足您的需求：

＆＃13;

＆＃13;

div div {
    border: 1px solid black;
}

＆＃13;

<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and unknown rows.</div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">This block spans three columns and one row.</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and row.</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and row.</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and row.</div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">This block spans three columns and one row.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

我添加了一点border来直观地了解它实际呈现的方式。这是它的缺点，它完全依赖于您对每个块中内容的控制来维护行。例如，如果您在第一个块中只放入足够的内容来计算第二个块的高度，则会刷新第三个，第四个和第五个块，并进一步向下推动第六个块。

＆＃13;

＆＃13;

div div {
    border: 1px solid black;
}

＆＃13;

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">One liner</div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">One liner</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">One liner</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">One liner</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">One liner<br />Two liner</div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">One liner</div>
</div>

＆＃13;

＆＃13;

＆＃13;

我担心没有＆＃34;容易＆＃34;缓解这种情况的方法，而不是为每个块定义height。此外，右下方块可以 NEVER 超过第三和第四块的内容height。如果它超过它，那么你会在第六个区块和它上方的区块之间产生间隙。

＆＃13;

＆＃13;

div div {
    border: 1px solid black;
}

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    height: 50px;
}

.row-2 {
    height: 100px;
}

＆＃13;

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 row-2">This block spans one column and unknown rows.</div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">This block spans three columns and one row.</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and row.</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and row.</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 row-2">This block spans one column and row.</div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">This block spans three columns and one row.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

即使第六个块适合间隙，如果它位于第五个块之后，它也只能跟随结构。这会强制浏览器将其呈现在它下面。那是block给你的。

老实说，在HTML（5）和CSS（3）的任何框架中进行布局的 ONLY 方法是使用table。对于布局来说，这是一种 HIGHLY 劝阻，但实际上，这是我所知道的唯一选择。

这里有好处，你仍然可以使用col-lg-*上的Bootstrap col-md-*，col-sm-*，col-xs-*和td类确保他们遵循Bootstrap列的大小。

＆＃13;

＆＃13;

td {
    border: 1px solid black;
    vertical-align: top;
}

＆＃13;

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<table>
    <tr>
        <td rowspan="2">This block spans one column and two rows.</td>
        <td colspan="3">This block spans three columns and one row.</td>
    </tr>
    <tr>
        <td>This block spans one column and row.</td>
        <td>This block spans one column and row.</td>
        <td rowspan="2">This block spans one column and two rows.</td>
    </tr>
    <tr>
        <td colspan="3">This block spans three columns and one row.</td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

对不起，我知道这并不是你想要的，但是，至少就我的知识而言，这是不可能的。布局没有table。

Answer 2

Masonry（javascript）似乎是理想的，虽然不是纯CSS / Bootstrap。

Answer 3

在这种情况下，问题被简化了，因为我有固定高度的div。我保留了Bootstrap模板，我在左下角分配了col-md-9的类，从顶部给它一定的空间。我知道这不是最好的方法，但它仍然是横向响应。

这是HTML代码：

<div class="row-fluid">
<div class="col-md-12">
    <div class="row">

        <div class="col-md-3 doubleRow box">...</div>
        <div class="col-md-9 singleRow box">...</div>
        <div class="col-md-3 singleRow box">...</div>
        <div class="col-md-3 singleRow box">...</div>
        <div class="col-md-9 singleRow box">...</div>
        <div class="col-md-3 doubleRow box upper">...</div>
    </div>
</div>

这就是CSS：

.singleRow{
    height:280px;
}

.doubleRow{
    height:560px;
    max-height:100%;
}

.upper{
    top: -280px;
    margin-bottom: -280px;  
}

.box {          
    border-style: solid;
    border-width: 5px;
    border-color:black;
    text-align: center;
    padding: 1%;
    position: relative;
}