禁用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 则会下移至新行，从而包装了列。

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

- joao-m-santos

---

无法复现 - https://codepen.io/Paulie-D/pen/rROGya - Paulie_D

也许这个答案可以帮助你：链接。 - Nenri

@Paulie_D 在此处复制 - https://codepen.io/anon/pen/pYjWOo - joao-m-santos

white-space:nowrap 是问题所在。这就是您要求的，也是您将要得到的。 - Paulie_D

@Paulie_D，我可以问一下那个CSS样式是在OP的问题中应用的吗？ - Cloud

Answer 1

通常可以在Bootstrap 4中的行上使用flex-nowrap类来防止列换行。但由于该列中存在宽度较大、省略号内容，所以这种方法不起作用。

由于解释了flexbox宽度计算的方式（在此这里和这里），您应该在flex-grow:1列（col）上设置width、min-width或max-width（任意宽度）。

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

<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://codeply.com/go/JKLUD0NLn4

另外，请勿在同一列上同时使用col和col-auto。 col的flex-grow: 1将防止col-auto收缩。

- Zim

---

关于你回答的第一部分，似乎 flex-nowrap 导致列2在行本身之外，位于占据所有空间的列1的右侧。 - Cloud

width: 0; 在Firefox中无效。min-width: 0; 在Chrome和Firefox中都有效。 - Roland Starke