没有换行的引导 4 列 - 使用最少或最多的空间答案

【问题标题】：Bootstrap 4 columns without wrap - use least or most amount of space没有换行的引导 4 列 - 使用最少或最多的空间
【发布时间】：2018-03-20 11:27:44
【问题描述】：

我正在尝试创建几行，两列。第一列是描述文本，第二列是金额。

第一列不应该自动换行，因为它是文本，可能占行的 80% 左右。第二列是数量，应该是右对齐。但是当我执行下面的代码时，每列都是 50%。

<div className="row border">
     <div className="col border">
          <small className="text-muted">{trans.payee} - {trans.category}</small>
     <div>
     <div className="col text-righ">
          <small className="text-muted">{trans.amount.toFixed(2)}</small>
    </div>
</div>

如何让第一列尽可能多地使用空间，然后第二列只使用它需要的空间。所以第 2 列不应该换行，而是应该使用尽可能少的空间。

也许 row/col 不适合使用？或者可以做到吗？

我正在使用 Bootstrap 4 - 这对我来说是一个学习曲线。

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

您可以在第二列使用 col-auto，这样它使用的空间最少

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

<div class="row border">
        <div class="col border text-truncate">
            <small class="text-muted">{trans.payee} - {trans.category} can be longer</small>
        </div>
        <div class="col-auto text-right">
            <small class="text-muted">40.00</small>
        </div>
</div>

如果需要，您还可以添加text-truncate 以防止第一列换行。

【讨论】：

【解决方案2】：

Note: You have not closed second div

如果你不给 div 宽度，那么它会相等，

你需要给其中一个div设置宽度，这样其他的可以自行调整。

<div className="row border">
     <div className="col border">
          <small className="text-muted">{trans.payee} - {trans.category}
          </small>
     </div>
     <div className="col text-righ">
      <small className="text-muted">{trans.amount.toFixed(2)}</small>
     </div>
</div>

【讨论】：