我使用的是 Bootstrap 的第 3 版。现在我更新到版本 4 我有以下问题:
它适用于我的 Bootstrap 3(见整页):
.titulo {
height: 200px;
background: #666;
border: 1px solid #333;
}
.dato {
height: 100px;
background: #666;
border: 1px solid #333;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="titulo col-lg-3 col-md-4 col-sm-4">Titulo</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">1</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">2</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">3</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">4</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">5</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">6</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">7</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">8</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">9</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">10</div>
</div>
同样的代码在 Bootstrap 4 中停止了对我的工作:
.titulo {
height: 200px;
background: #666;
border: 1px solid #333;
}
.dato {
height: 100px;
background: #666;
border: 1px solid #333;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="titulo col-lg-3 col-md-4 col-sm-4">Titulo</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">1</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">2</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">3</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">4</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">5</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">6</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">7</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">8</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">9</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">10</div>
</div>
问题:
如何使 div.titulo
占据 2 行,并且 div.dato
响应式包装,使用剩余空间,根据它是设备sm
还是lg
?div 有一个固定的高度(标题是其余部分高度的 2 倍)。
值得澄清的是,我使用ngFor
角度动态构建小盒子,因此以固定方式将它们分成容器不是一种选择。我必须生成它们的代码是:
<div class="dato col-lg-3 col-md-4 col-sm-6"
*ngFor="let dato of datos">
{{dato.nombre}}
</div>
这种情况下的问题以及为什么代码不适用于 Bootstrap 4(但它适用于 Bootstrap 3),是因为版本 4 使用 flexbox 生成其网格布局,而版本 3 使用典型的旧
float: left
con 块元素。Flexbox 是一个 CSS Box 模块,旨在生成一维布局,即在一个方向上,列或行。
在这种情况下,尝试生成一个二维布局,将其转换为一个网格,而 Flexbox “不足”。这就是 CSS 网格的用途。请参阅网格的基本示例。
这个问题有很多解决方案,考虑到在HTML级别或者使用的CSS框架没有灵活性,有必要提出一个我个人不喜欢,也不是我最喜欢的解决方案适当或“干净”。
我的解决方案是返回并“模拟”此特定“网格”的 Bootstrap 3 行为,方法是将容器返回
.row
为块(而不是 flexbox 容器),并使所述“行”中的列使用float: left;
我认为这是最简单的解决方案,但可能有比这更好的解决方案,但它们可能需要大量重构:
table
将容器的显示更改为。版:
感谢 Mariano 的建议,我们看到没有必要添加额外的 CSS,使用 Bootstrap 的 "helper" 类:
d-block
和float-left
,但有必要稍微修改 Angular 生成的 HTML。Bootstrap首先处理行,然后处理列:
因此,首先我们创建一个包含 2 列的行:在第一列中插入一个
div
空白,然后在下一列中插入另外两行,内部将有 3 列。