Question

我正在尝试创建一些包含2列的行。第一列是描述文本，第二列是数量。

第一列不应该自动换行，并且正如它的文字一样，可能需要大约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>

如何让第一列尽可能多地占用空间，然后第二列只使用它所需的空间。所以第二列不应该包装，但应尽量使用尽可能少的空间。

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

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

Answer 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以防止第一列在需要时进行换行。

Answer 2

Note: You have not closed second div

如果你没有给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>

Bootstrap 4列没有换行 - 使用最少或最多的空间

2 个答案: