在Bootstrap 4中禁用列包装

Question

我目前面临以下情况：

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

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

即[| -------- column1 -------- | |列2 | ]

我的问题是当column1中的内容的宽度大于包含的行时。发生的事情是，column1填充整个行，而不是column1收缩仍然适合同一行中的两列，col-12就像column2和flex-nowrap下降到一个新行，因此包裹列。

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

Answer 1

通常，可以在行上使用here类来防止在Bootstrap 4中进行col包装。在这种情况下，由于列中的宽椭圆内容，这将无法工作。

由于计算flexbox宽度的方式（解释here和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将阻止qazxswpoi萎缩。