在具有较大和较小列的弹性列布局中，是否可以让较小的列显示全宽以换行？

Question

我正在使用Bootstrap 4。我有一个像一样的灵活布局

.larger {
background: blue;
}
.smaller {
background: red;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col larger"> larger column </div>
<div class="col-3 smaller"> smaller column </div>
</div>

现在，当我将窗口调整到很小的宽度时，第二列将显示在新行中，全部由它自己显示。没关系。但是，它仍然只显示在线条宽度的一小部分中。太糟糕了。如果有换行符，我想让div填充可用的大小。我该怎么做？

Answer 1

您没有义务使用行/列系统：

div {
outline:1px solid red
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<div class="d-flex flex-wrap">
<div class="w-75 flex-grow-1"> larger column </div>
<div class="flex-fill"> smaller column </div>
</div>

Answer 2

请使用此代码

<div class="row">
<div class="col"> larger column </div>
<div class="col-12 col-md-3"> smaller column </div>
</div>

.col-md-3在平板电脑和大屏幕上占据了三分之一的屏幕，但在小屏幕上没有效果。

Answer 3

由于添加了css标记，这里有一个纯CSS替代解决方案：

.container{
display: flex;
flex-wrap: wrap;
}
.larger {
background: blue;
flex: 1;
width: 100%;
min-width: 75%;
}
.smaller {
background: red;
flex: 1;
}

<div class="container">
<div class="larger"> larger column </div>
<div class="smaller"> smaller column </div>
</div>

我在这里所做的是使用flexbox来使用flex-wrap进行包装，使用flex-grow使它们生长到任何可用的空间。最后，使用min-width将较大的列设置为行的3/4。如果您对flexbox及其工作原理感兴趣，请点击此处了解更多信息。

Answer 4

遵循网格选项。

每行由12列组成。如果您希望第二个元素在小屏幕及以上(~576px(上占据3列，但所有12列都小于这个值，那么要使用的类将是col-12 col-sm-3。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col"> larger column </div>
<div class="col-12 col-sm-3"> smaller column </div>
</div>