Bootstrap : 在多行上对齐按钮插件

Question

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

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

不兼容

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

Answer 1

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

<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 等）中将使其符合该容器的最大宽度，因此 table不一定要全屏。

Bootstrap : 在多行上对齐按钮插件

Bootstrap : align button addons over multiple rows

html

css

twitter-bootstrap-3