html – 使用Bootstrap绘制复杂网格

概述我正在使用Bootstrap3处理 HTML视图.我需要创建一个包含不同单元格的模板,我通常使用cols和rows,但这次我在绘制一列时遇到问题. 这是我需要的方案： 这是代码： <div class="row"> <div class="col-md-3 doubleHeight"></div> <div class="col-md-9 singleHeight"></div> <d 我正在使用bootstrap3处理 HTML视图.我需要创建一个包含不同单元格的模板,我通常使用cols和rows,但这次我在绘制一列时遇到问题.

这是我需要的方案：

这是代码：

<div >  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <!--column bottom right-->  <!--column bottom left--></div>

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

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

在我给你解决方案之前,我想做一些完美清楚的东西,bootstrap框架不支持这个.为了澄清,bootstrap支持可用于解释此问题的块的包装,但是,它不会 *** 纵高度来容纳跨越多行的块.

好吧,有了这个说,你可以得到你的请求的壁橱是通过column wrapping.你不能做多层的块,因为你有块属于两个不同的父母,并且根本不可能量化当前的CSS / HTML结构.此外,您无法执行任何 *** 作,最后一个块将显示在右下方块的旁边.

这是一个结构的小演示,可以满足您的要求：

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 >    <div >This block spans one column and unkNown rows.</div>    <div >This block spans three columns and one row.</div>    <div >This block spans one column and row.</div>    <div >This block spans one column and row.</div>    <div >This block spans one column and row.</div>    <div >This block spans three columns and one row.</div></div>

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

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 >    <div >One liner</div>    <div >One liner</div>    <div >One liner</div>    <div >One liner</div>    <div >One liner<br />Two liner</div>    <div >One liner</div></div>

我担心没有“简单”的方法来缓解这个问题,除非为每个区块定义高度.此外,右下方块不能超过第三和第四块的内容高度.如果它超过它,那么你会在第六个块和它上面的那个块之间产生间隙.

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 >    <div >This block spans one column and unkNown rows.</div>    <div >This block spans three columns and one row.</div>    <div >This block spans one column and row.</div>    <div >This block spans one column and row.</div>    <div >This block spans one column and row.</div>    <div >This block spans three columns and one row.</div></div>

即使第六个块适合间隙,如果它位于第五个块之后,它也只能跟随结构.这会强制浏览器将其呈现在它下面.这对你来说很重要.

老实说,在HTML(5)和CSS(3)的任何框架中进行布局的唯一方法是使用表.对于布局来说,这是一种非常沮丧的做法,但实际上,它是我所知道的唯一选择.

这是好处,你仍然可以在tds上使用bootstrap col-lg- *,col-md- *,col-sm- *和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>

对不起,我知道这不是你想要的,至少就我的知识而言,如果没有表格,就不可能做到这种环绕式布局.

总结

以上是内存溢出为你收集整理的html – 使用Bootstrap绘制复杂网格全部内容，希望文章能够帮你解决html – 使用Bootstrap绘制复杂网格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。