css - Bootstrap : align button addons over multiple rows

Question

我正在创建的表单之一是添加给定供应商的联系信息。表单的部分是动态的，看起来像这样

但是，如您所见，下拉按钮会动态调整大小以适应内容。我想使用某种表格布局，但恐怕这与 Bootstrap 的 CSS 不兼容。

底线是，以前有没有人这样做过，您的解决方案是什么？

Answer 1

正如我在评论中所述，有多种不同的方法。首先，使用表格:

<table class="table table-responsive table-striped table-bordered">
  <tbody><tr>
    <td>
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
          Phone
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cell</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Home</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Office</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Fax</a></li>
        </ul>
      </div>
    </td>
    <td>
      <input class="form-control" type="text">
    </td>
    <td>
      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
    </td>
  </tr>
  <tr>
    <td>
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
          Cell
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Phone</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Home</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Office</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Fax</a></li>
        </ul>
      </div>
    </td>
    <td>
      <input class="form-control" type="text">
    </td>
    <td>
      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
    </td>
  </tr>
  <tr>
    <td>
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
          Business Fax
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Phone</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Home</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Office</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cell</a></li>
        </ul>
      </div>
    </td>
    <td>
      <input class="form-control" type="text">
    </td>
    <td>
      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
    </td>
  </tr>
</tbody></table>

第二个使用网格系统:

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2">
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
          Phone
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Fax</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Home</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Office</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cell</a></li>
        </ul>
      </div>
    </div>
    <div class="col-xs-8">
      <input class="form-control" type="text">
    </div>
    <div class="col-xs-2">
      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
          Cell
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Phone</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Home</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Office</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Fax</a></li>
        </ul>
      </div>
    </div>
    <div class="col-xs-8">
      <input class="form-control" type="text">
    </div>
    <div class="col-xs-2">
      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
          Business Fax
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Phone</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Home</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Office</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cell</a></li>
        </ul>
      </div>
    </div>
    <div class="col-xs-8">
      <input class="form-control" type="text">
    </div>
    <div class="col-xs-2">
      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
    </div>
  </div>
</div>

这是一个带有实际示例的 bootply:

Bootply

希望能给您一些启发!如果您只想让按钮具有相同的宽度，您也可以尝试自定义 CSS，但您必须首先知道每个文本段的长度，这可能有点棘手。

编辑

我还应该注意，放一个 <table>在容器内(modal、panel、conatiner、container-fluid 等)将使其符合该容器的最大宽度，因此表格不必全屏显示。