Bootstrap 5 - 在保持行的同时具有自动宽度的列答案

【问题标题】：Bootstrap 5 - column to have auto width while keeping to rowBootstrap 5 - 在保持行的同时具有自动宽度的列
【发布时间】：2021-05-26 03:00:30
【问题描述】：

在 Bootstrap 5 中 - 我有不同的页面，有时是 2 列，有时是 3。

我正在使用的模板系统测试是否需要第三列并添加它。

<div class="container pt-5">
<div class="row gx-5">
<div class="col-sm-12 order-2 order-md-1 col-md-3">
<!-- Left column content here -->     
</div>
<div class="col-sm order-1 col-md-6">
<!-- Center column content here -->     
</div>
<!-- an if statement goes here which I won't bother everyone with-->
<div class="col-sm-12 order-3 col-md-3">
<!-- Right column content here -->     
</div>
<!-- the if statement ends here-->
</div>
</div>

这适用于三列布局。但是在模板中，有时（故意删除）第三列（右列）。对于这两个列布局，这个布局仍然可以正常工作，只是现在中心列需要是 col-md-9 而不是 col-md-6。

我可以让模板改变这一点，所以它是“可操作的”，但我想坚持完全由引导程序处理的布局，可以这么说。

我觉得很好，col-md-auto，它应该根据需要调整大小。

如果我在“col-md-6”的位置输入“col-md-auto”，那么中心栏会跳到新的一行。

我认为要么有一种方法可以强制行，所以 md-auto 跨越 9 就像我希望的那样，或者我完全错过了一些东西。

一如既往，我非常感谢大家的帮助。

如果我遗漏了什么，请告诉我。

通过我收到的一些 cmets，我意识到我看不清楚，使用上述引导类，我们得到了一个小断点，将三列堆叠在一起，“中心”在顶部，“右列”在中间，并且“左栏”最后。然后对于“sm”以上的任何东西，它给出“左列”左，“中心列”中心，“右列”右

唯一的问题是当它们没有左列时（这是该站点的有效条件），大小大于“sm”的中心需要占用剩余空间（当它们不是左列时，它将是 col-9右列，或 col-6（如果是）。

【问题讨论】：

Why not just use a table element?
当您说表格元素时，您的意思是表格 dom 元素或引导等效项？我的回答虽然可能不正确，但它是错误的工具，不一定能解决当前的情况，但如果确实如此，我将非常感谢您提供的任何细节。谢谢。
@Rogelio how about: <table height="100%"><tr height="100%"><td height="100%">left</td><td height="100%">middle</td><td height="100%">right</td></tr></table>
您好，一目了然，问题是 a）您编写的不是引导程序，b）不幸的是，它无法处理上述任何问题。
Oh. sorry about that.

标签： html css bootstrap-5

【解决方案1】：

只需将<div class="col-sm order-1 col-md-6"> 更改为<div class="col order-1">。现在此列将具有自动宽度。

完整代码

<div class="container pt-5">
  <div class="row gx-5 bg-primary">
    <div class="col-sm-12 order-2 order-md-1 col-md-3 bg-warning">
      <!-- Left column content here -->
    </div>
    <div class="col order-1 bg-info">
      <!-- Center column content here -->
    </div>
    <!-- an if statement goes here which I won't bother everyone with-->
    <div class="col-sm-12 order-3 col-md-3 bg-body">
      <!-- Right column content here -->
    </div>
    <!-- the if statement ends here-->
  </div>
</div>

【讨论】：

非常感谢康拉德。请看上面，我做了一些补充说明。我希望澄清一下，这可能是我的无知（我的测试似乎证明了我在这里所说的话）以上并不能解决问题。请让我知道并再次感谢您迄今为止的沟通。

【解决方案2】：

在这种情况下，我无法仅使用引导程序来解决。我确实需要在模板引擎中添加一个 if 语句。所以我的最终代码是，模板引擎基于两列或三列创建不同的模板。我相信我的理论是有缺陷的，当模板引擎确实决定然后生成带有 x 的 2 列布局时，最好将其用于引导程序（就处理 2 或 3 列而言）引导代码或三列。谢谢大家的时间。我认为这是关闭它的最佳方式。

【讨论】：