logo标签列表

使用Bootstrap绘制复杂网格

htmlcsstwitter-bootstrap
4
我正在使用Bootstrap3创建HTML视图。我需要创建一个包含不同单元格的模板，通常我使用列和行进行操作，但是这次我在绘制一列时遇到了问题。
这是我需要的方案： 这是代码：
<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之后绘制它，它不允许我将最后一列与其左侧的列联成一行。如果我在左侧的最后一列之后绘制它，则无法占用上面的空间。 你有任何可能的解决方案吗？ 谢谢。

它在不同的屏幕尺寸上表现如何？ - m4n0
我只需要在中等和大型屏幕上使用它。 - Stark_kids
我暂时想不到使用默认的Bootstrap 3，甚至是flexbox的方法来实现这个。这将是一个带有内容的可滚动页面，还是一个不需要滚动的全屏应用程序？如果您不需要滚动，则定位事物可能会非常简单。 - robabby
我认为Bootstrap不能像那样跨行。 - Karl Gjertsen
它将是可滚动的！ - Stark_kids
你愿意不使用Bootstrap列来完成吗？ - Dan Green-Leipciger
3个回答
3

警告: 这篇文章包含了多个相同代码片段的变体，用于解释和演示代码如何实际运行。如果你要编辑它，请记住这一点。

在我为您提供解决方案之前，我想要非常明确地说明一点，这不是Bootstrap框架所支持的。换句话说，Bootstrap支持包裹块，以便于处理此类问题，但是，它不会通过修改height来适应跨多行的块。

好的，既然说清楚了，最接近您要求的方式是通过列包装来实现。您无法使用多层块，因为您有块属于两个不同的父级，而目前的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 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来展示它实际的渲染效果。这种方法的缺点是，它完全依赖于你对每个块中内容的控制来维护行的数量。例如，如果你只在第一个块中放入足够的内容以适应第二个块的高度，那么第三、四、五个块将会左对齐并将第六个块向下推。

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>

很遗憾，除了为每个块定义高度之外，没有“简单”的方法来减轻这种情况。此外，右下角的块绝对不能超过第三和第四个块的内容高度。如果它超过了，那么就会在第六个块和上面的块之间出现间隙。

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>

尽管第六个块可以适应间隙，但如果在第五个块之后才出现，则只能跟随该结构。这会强制浏览器在其下方渲染。这就是所谓的“块”。
老实说，在任何HTML（5）和CSS（3）框架中创建该布局的唯一方法就是使用“表格”。尽管这是一个被强烈反对的做法，但真的是我所知道的唯一选择。
好处是，您仍然可以在“td”上使用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>

抱歉，我知道这并不完全符合您的需求，但就我的知识范围而言，在没有 table 的情况下实现环绕布局是不可能的。

0
在这种情况下，问题变得简单了，因为我有固定高度的div。我保留了Bootstrap模板，并将左下角的div分配给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;
}
你能提供用于实现这个功能的代码吗，以便任何想要实现此功能的人都可以看到如何完成它吗？听起来像是我在答案的第三个片段中演示的相同内容。 - Christopher Esbrandt
@Stack_kids 我明白了。你使用了固定定位来偏移块。我想这对于具有绝对大小的设计是有效的，但它也有其缺陷。你需要添加一个 @media 查询来防止 CSS 影响较小分辨率下的显示效果。在 991 像素或更低的分辨率下查看它，你应该就能理解我的意思了。 - Christopher Esbrandt
我在小分辨率下没有任何问题，因为网格会在小型和超小型设备上发生变化...这是我可以使用此解决方案的唯一原因...无论如何，感谢您的帮助！ - Stark_kids
“网格变化”是指网格被替换成其他内容，还是Bootstrap的外观改变了它？如果是后者，在使用默认的Bootstrap响应式设计时，第五个块在较低分辨率下完全被第六个块覆盖。这是因为.upper仍然被应用于第六个块。我想在那种布局中不再需要固定高度。如果是前者，好的，那就忘了我说的吧。 :) - Christopher Esbrandt
我的意思是它被另一种配置所取代...(: - Stark_kids
非常好。我只是想确保我们在同一页面上。我很高兴你找到了适合你的解决方案。^^ - Christopher Esbrandt
0

Masonry（JavaScript）似乎非常适合这个问题，尽管它不是纯CSS/Bootstrap。

这仅涵盖了 rowspan，而不是 colspan。它与 Bootstrap 所做的相同，但针对行，它们无法合并。 - Christopher Esbrandt
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接