使用Bootstrap绘制复杂网格

时间:2015-11-11 14:36:33

标签: html css twitter-bootstrap

我正在使用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之后绘制它,它不允许我显示左边的最后一列。如果我在左边的最后一列之后绘制它,它就不会占据上面的空间。 您对可能的解决方案有任何想法吗? 感谢。

3 个答案:

答案 0 :(得分:3)

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

在我给你解决方案之前,我想要明确完美,这是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

答案 1 :(得分:0)

Masonry(javascript)似乎是理想的,虽然不是纯CSS / Bootstrap。

答案 2 :(得分:0)

在这种情况下,问题被简化了,因为我有固定高度的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;
}