html - 使用 Bootstrap 绘制复杂网格

Question

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

这是我需要的方案:

这是代码:

<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 框架不支持这一点。需要澄清的是，Bootstrap 支持可用于解释这一点的 block 的包装，但是，它不操纵高度以容纳跨越多行的 block 。

好吧，话虽如此，您可以通过 column wrapping 获得您的要求。 .你不能做多层 block ，因为你有属于两个不同 parent 的 block ，而这根本不可能用当前的 CSS/HTML 结构来量化。此外，您无法为最后一个 block 显示在右下角的 block 旁边做任何事情。

下面是一个与您的要求最接近的结构的小演示:

div div {
    border: 1px solid black;
}

<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>

我添加了一点 border 来直观地了解它的实际呈现方式。这是不利的一面，它 100% 取决于您对每个 block 中内容的控制来维护行。例如，如果您在第一个 block 中放置的内容只占第二个 block 的高度，那么您将刷新第三个、第四个和第五个 block 并将第六个 block 进一步向下推。

div div {
    border: 1px solid black;
}

<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>

除了为每个 block 定义 height 外，恐怕没有“简单”的方法来缓解这种情况。此外，右下角的 block 不能永远超过第三个和第四个 block 的内容高度。如果它超过它，那么第六个 block 和紧靠它上面的 block 之间会有一个间隙。

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;
}

<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>

即使第六 block 适合间隙，它也只能在第五 block 之后才能遵循结构。这会强制浏览器在其下方呈现它。这是给你的 block 。

老实说，在任何 HTML(5) 和 CSS(3) 框架中进行布局的唯一方法是使用表格。这是一种强烈不鼓励的布局做法，但说实话，这是我所知道的唯一选择。

好处是，您仍然可以使用 Bootstrap col-lg-*、col-md-*、col-sm-* 和 td 上的 col-xs-* 类，以确保它们遵循 Bootstrap 列大小调整。

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

<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>

抱歉，我知道这不是您想要的，但是，至少就我所知，没有 table< 就不可能实现环绕式布局.