时间戳

首页 > 解决方案 > Bootstrap 5 - 在保持行的同时具有自动宽度的列

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

问题描述

在 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 就像我在这种情况下想要的那样，或者我完全错过了一些东西。

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

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

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

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

标签： htmlcssbootstrap-5

解决方案

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

推荐阅读