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

Question

-您好，世界！-

我正在使用Bootstrap 4进行​​项目，但是遇到了麻烦。

下面是我正在使用的一些标记。现在，这些按钮位于文本边缘旁边。我希望它的工作方式是使它们正确对齐，但只占用最长文本块的空间。

以下是我所想到的一个例子：

我的想法是将它们包装在一个没有静态大小的类的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>