你好,你能帮我在我的代码中设置列吗?我有这段代码:
<div class="container-fluid h-100">
<div class="row h-100">
<div class="flex-column h-100">side menu</div>
<div class="???">
<div>1 piece</div>
<div>2 pieces piece</div>
<div>1 piece</div>
<div/>
<div/>
<div/>
这是我的实际结果,我在其中绘制了我需要如何分割剩余空间。带有菜单的蓝色列应该有固定的,实际上是做什么的。 1:2:1 的列数可以调整。
最佳答案
您可以使用 d-flex
而不是 row
作为 row
可以wrap - 内容可以丢弃在边栏下方。
对于内容,如果你必须保留 html 结构,你可以使用这个:
<div class="d-flex w-100">
<div class="col-3">1 piece</div>
<div class="col-6">2 pieces piece</div>
<div class="col-3">1 piece</div>
</div>
请参阅下面的演示 - 添加边框以供说明:
html,body {
height: 100%;
}
div {
border: 1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid h-100">
<div class="d-flex h-100">
<div class="flex-column h-100">side menu</div>
<div class="d-flex w-100">
<div class="col-3">1 piece</div>
<div class="col-6">2 pieces piece</div>
<div class="col-3">1 piece</div>
</div>
</div>
</div>
关于css - Bootstrap 4.0 - 使用 flex 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46076910/