Question

我目前面临以下情况：

<div class="row no-gutters">
    <div class="col"></div>
    <div class="col col-auto"></div>
</div>

因此，第一列将占用第二列未填充的可用空间

即 [| --------第1列-------- | | column2 | ]

我的问题是column1中的内容的宽度大于包含行的宽度。发生的是，column1不会column1缩小到仍适合同一行行中的两列，而是填充了整行，好像是col-12，而column2下降到了新行，因此将列包裹起来。

有没有办法防止这种行为并将两列始终保持在同一行？

Answer 1

通常可以在行上使用flex-nowrap类，以防止在Bootstrap 4中使用col换行。在这种情况下，由于列中的省略号内容太宽，因此无法正常工作。

由于弹性盒宽度的计算方式（解释为here和here），您应该设置width，min-width或max-width（< em> flex-grow:1列（col）上的任意宽度。

例如，在width:0 ...上设置col ...

<div class="row no-gutters">
    <div class="col">
        <h4 class="ellipsis">aaaaaa..</h4>
    </div>
    <div class="col-auto d-flex align-items-center">
        something
    </div>
</div>

.col {
  width: 0;
}

https://www.codeply.com/go/JKLUD0NLn4

此外，请勿在同一列上同时使用col和col-auto。 flex-grow:1中的col将阻止col-auto缩小。

在Bootstrap 4中禁用列换行

1 个答案: