如何使 Bootstrap 列足够宽以容纳广告？答案

【问题标题】：How can I keep Bootstrap columns wide enough for advertisements?如何使 Bootstrap 列足够宽以容纳广告？
【发布时间】：2021-12-17 20:55:24
【问题描述】：

我使用 bootstrap5 创建包含 3 列的页面：

<div class="container">
  <div class="row">
    <div class="col-md-3">LEFT</div>
    <div class="col-md-6">CENTER</div>
    <div class="col-md-3">RIGHT</div>
  </div>
</div>

现在在左右两列中有宽度为 300 像素的广告。如何限制左右列缩小小于 300px，并且只缩小一个中心列。

如果我在左右设置 min-width:300px，则右列被向下推。

【问题讨论】：

它被下推是因为 300px 比你屏幕尺寸的 3/12 宽...你为什么在响应式框架中使用固定宽度？只需将 col-md-3 更改为 col-md-1 或 col-md-2 即可调整大小并调整中心 div 以适应 12 列
另外，请参阅How to Ask。您的 sn-p（理想情况下是功能演示）应该显示您所描述的内容。它没有。
我认为您正在寻找“圣杯”stackoverflow.com/questions/42617595

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

最简单的方法是使用网格auto-layout columns。 col-auto 将缩小以适应其内容（广告）。然后，使用flex-nowrap 来防止换行...

<div class="container">
  <div class="row flex-md-nowrap">
    <div class="col-md-auto">
        <img src="//via.placeholder.com/300" />
    </div>
    <div class="col-md">CENTER</div>
    <div class="col-md-auto">
        <img src="//via.placeholder.com/300" />
    </div>
  </div>
</div>

Responsive Demo

【讨论】：

【解决方案2】：

您可以在 .row 中模拟 .col-md-*s 的相同（堆叠到水平）行为，并使用 .flex-wrap.flex-md-nowrap 在中等断点处进行弹性切换包装。
试试这个：

.ad {
  width: 300px;
  background: cyan;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="container-fluid">
  <div class="d-flex flex-wrap flex-md-nowrap">
    <div class="ad">LEFT</div>
    <div class="w-100">CENTER</div>
    <div class="ad">RIGHT</div>
  </div>
</div>

【讨论】：

【解决方案3】：

不要使用固定（按比例）的列大小。使用Flex。这是一个例子。我已经减小了这个演示的图像大小，但它适用于 300 像素的图像。

您可能希望更改移动设备的行为，可能将所有内容堆叠起来，使其不会奇怪地包裹起来。我不确定你的目标。

<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="container">
  <div class="d-flex flex-wrap">
    <div><img src="https://via.placeholder.com/200"/></div>
    <div class="flex-fill">CENTER</div>
    <div><img src="https://via.placeholder.com/200"/></div>
  </div>
</div>

【讨论】：