在Bootstrap 4中禁用列换行

Question

我目前面临以下情况：

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

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

即[| -------- column1 -------- | | column2 | ]

我的问题是里面的内容column1的宽度大于包含行的宽度。发生的是，不是column1缩小以仍然使两列都适合同一行行，而是column1像填满整个行一样填充整个行col-12并column2下降到新行，从而包装了列。

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

Answer 1

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

由于宽度计算（解释的方式Flexbox，就在这里和这里），你应该设置一个width，min-width或max-width（任意宽度的）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从萎缩。