我正在使用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之后绘制它,它不允许我显示左边的最后一列。如果我在左边的最后一列之后绘制它,它就不会占据上面的空间。 您对可能的解决方案有任何想法吗? 感谢。
答案 0 :(得分:3)
警告:此帖子包含解释之间相同代码段的多种变体,以演示逻辑并提供代码实际操作方式的直观表示。如果你编辑它,请记住这一点。
在我给你解决方案之前,我想要明确完美,这是Bootstrap框架支持的 NOT 。为了澄清,Bootstrap支持包含可用于解释此问题的块,但是, NOT 操纵height
以容纳跨越多行的块。
好吧,说到这个,您可以通过column wrapping获取您的请求。您不能执行多个块的层,因为您拥有属于两个不同父级的块,并且根本无法使用当前的CSS / HTML结构进行量化。此外,您无法执行任何操作,最后一个块将显示在右下方的块旁边。
这里有一个结构的小演示,可以满足您的需求:
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;
我添加了一点border
来直观地了解它实际呈现的方式。这是它的缺点,它完全依赖于您对每个块中内容的控制来维护行。例如,如果您在第一个块中只放入足够的内容来计算第二个块的高度,则会刷新第三个,第四个和第五个块,并进一步向下推动第六个块。
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;
我担心没有&#34;容易&#34;缓解这种情况的方法,而不是为每个块定义height
。此外,右下方块可以 NEVER 超过第三和第四块的内容height
。如果它超过它,那么你会在第六个区块和它上方的区块之间产生间隙。
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;
即使第六个块适合间隙,如果它位于第五个块之后,它也只能跟随结构。这会强制浏览器将其呈现在它下面。那是block
给你的。
老实说,在HTML(5)和CSS(3)的任何框架中进行布局的 ONLY 方法是使用table
。对于布局来说,这是一种 HIGHLY 劝阻,但实际上,这是我所知道的唯一选择。
这里有好处,你仍然可以使用col-lg-*
上的Bootstrap col-md-*
,col-sm-*
,col-xs-*
和td
类确保他们遵循Bootstrap列的大小。
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;
对不起,我知道这并不是你想要的,但是,至少就我的知识而言,这是不可能的。布局没有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;
}