在具有更大和更小列的弹性列布局中，我可以让较小的列显示全宽以防它被包裹吗？

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>

现在，当我将 window 调整为非常小的宽度时，第二列单独显示在新行中。没关系。但是，它仍然只显示为线宽的一小部分。那很糟。如果有换行符，我想让 div 填充可用大小。我该怎么做？

Answer 1

请使用此代码

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

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

Answer 2

关注grid options.

每行由 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>

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 使它们增长到任何可用的 space。最后，使用 min-width 将较大的列设置为行的 3/4。如果您对 flexbox 及其工作原理感兴趣，请阅读更多 here.

Answer 4

您没有义务使用row/col系统：

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>

在具有更大和更小列的弹性列布局中，我可以让较小的列显示全宽以防它被包裹吗？

In a flex column layout with a bigger and a smaller column, can I have the smaller column display full-width in case it's wrapped?

css

flexbox

bootstrap-4