如何使引导包装的列拉伸全宽答案

【问题标题】：How to make bootstrap wrapped columns to stretch full width如何使引导包装的列拉伸全宽
【发布时间】：2019-09-09 11:09:08
【问题描述】：

我在codepen 上有简单的代码示例，但为了方便起见，这里是标记：

<div class="container my-container">
  <div class="row m-row justify-content-between">
    <div class="col-2 my-col">One of three columns</div>
    <div class="col-5 my-col">One of three columns</div>
    <div class="col-5 my-col">One of three columns</div>
  </div>
</div>

还有一些自定义 css：

.my-row {
  justify-content: stretch;
}

.my-col {
  background: yellowgreen;
  border: 1px gray solid;
  align-self: stretch;
}

有了更大的屏幕宽度，我觉得这很好：

但是当我设置小尺寸时，例如。而不是调整浏览器窗口的大小，您可以将 my-container 宽度设置为 150 像素，只是为了演示会发生什么

.my-container {
  width: 150px;
}

然后项目包装，我得到以下结果：

如何使包装好的物品填满剩余的宽度？

【问题讨论】：

不要让你的容器宽 150px - 如果你这样做了，那么你需要增加你的 cols 的大小 - col 2 表示 150px 的六分之一，这就是为什么你的 col 如此窄并且文本溢出的原因
并移除 align-self:stretch;
我将其设置为 150px 宽只是为了演示在小宽度下会发生什么，因为您无法将 codepen viewpor 调整到那么低的大小。
然后使用响应式类根据浏览器大小调整 col 大小：例如尝试 col-sm-6 col-lg-2 my-col 并删除容器的拉伸和宽度，然后调整浏览器大小
@Dimitris 移除 align-self: 拉伸似乎没有任何效果

标签： css bootstrap-4 bootstrap-grid

【解决方案1】：

我猜你应该使用引导断点see here under Grid options。

因此，如果您希望它们是容器的全宽，请使用 col-12。

 <div class="container my-container">
  <div class="row m-row justify-content-between">
    <div class="col-12 col-sm-2">One of three columns</div>
    <div class="col-12 col-sm-5">One of three columns</div>
    <div class="col-12 col-5">One of three columns</div>
  </div>
</div>

【讨论】：

这确实会在最后一个项目被包裹为小宽度时拉伸，但对于大宽度，它将保留在包裹的行中并且不会移动到有足够空间容纳它的第一行
那是因为我错过了设置 col-12 col-sm-5 和行中的最后一个 div

【解决方案2】：

您可以将.col-md-* 或.col-sm-* 类用于小型设备中的全宽内容，而不是.col 类。全宽显示 sn-p 并调整大小。

.my-row {
  justify-content: stretch;
}

.my-col {
  background: yellowgreen;
  border: 1px gray solid;
  align-self: stretch;
}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  
<div class="container my-container">
  <div class="row m-row justify-content-between">
    <div class="col-md-2 my-col">One of three columns</div>
    <div class="col-md-5 my-col">One of three columns</div>
    <div class="col-md-5 my-col">One of three columns</div>
  </div>
</div>

注意：如果您更改 .container 宽度，则您的 .col-**-* 类宽度无法更改，您必须手动更改它。

谢谢...

【讨论】：

对不起，这不能回答我的问题
@mlst 所以实际上你想要什么请解释更多，如果可能的话我会帮你解决问题。

【解决方案3】：

只需添加空格：nowrap;

.my-row {
  justify-content: stretch;
  white-space: nowrap;
}

.my-col {
  background: yellowgreen;
  border: 1px gray solid;
  align-self: stretch;
  white-space: nowrap;
}

【讨论】：