html - 将多个 Bootstrap 按钮与多行中最长的行对齐

Question

-你好，世界!-

我正在使用 Bootstrap 4 开发一个元素，但遇到了障碍。

下面是我正在使用的一些标记。现在按钮就在文本边缘旁边。我希望它的工作方式是让它们右对齐，但只占用与最长文本 block 一样多的空间。

这是我的想法的一个例子:

我的想法是将它们包装在一个没有静态大小的类的 div 中，然后在其中右对齐它们。我只是不确定什么课 使用，因为 col-x 类不会随着行的长度动态扩展。这是行不通的，因为这些文本行可能会很长。

有人知道如何解决这个问题，或者可以插入我朝正确的方向前进吗？

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<dl class="row">
  <dt class="col-2">Key</dt>
  <dd class="col-10">Value</dd>


  <dt class="col-2">Active</dt>
  <dd class="col-10">
    <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
  </dd>


  <dt class="col-2">Values</dt>
  <dd class="col-10">
    <div class="row">
      <div class="col-12">Test <a aria-label="Delete" class="float-right btn-danger btn btn-sm float-none" href="#"><i class="fa-trash fa"></i> </a>
      </div>
      <div class="col-12">Longer Test <a aria-label="Delete" class="float-right btn-danger btn btn-sm float-none" href="#"><i class="fa-trash fa"></i> </a>
      </div>
      <div class="col-12">An Even Longer Test <a aria-label="Delete" class="float-right btn-danger btn btn-sm float-none" href="#"><i class="fa-trash fa"></i> </a>
      </div>
    </div>
  </dd>
</dl>

Answer 1

您正在寻找的是d-inline-flex和flex-column

查看代码示例:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<dl class="row">
  <dt class="col-2">Key</dt>
  <dd class="col-10">Value</dd>
  <dt class="col-2">Active</dt>
  <dd class="col-10">
    <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
  </dd>

  <dt class="col-2">Values</dt>
  <dd class="col-10">
    <div class="row ">
      <div class="d-inline-flex flex-column">
        <div class="">
          Test
          <a aria-label="Delete" class="float-right btn-danger btn btn-sm " href="#">
            <i class="fa-trash fa"></i>
          </a>
        </div>
        <div class="">
          Longer Test
          <a aria-label="Delete" class="float-right btn-danger btn btn-sm " href="#">
            <i class="fa-trash fa"></i>
          </a>
        </div>
        <div class="">
          An Even Longer Test
          <a aria-label="Delete" class="float-right btn-danger btn btn-sm " href="#">
            <i class="fa-trash fa"></i>
          </a>
        </div>
      </div>
    </div>
  </dd>
</dl>