简单的引导控制水平对齐答案

【问题标题】：simple bootstrap controls horizontal align简单的引导控制水平对齐
【发布时间】：2017-02-13 10:57:08
【问题描述】：

我在引导程序中遗漏了一些东西。我想要一个标签/输入/按钮组合，向右推，全部在一行在我的桌子上方。

它应该保持相同的大小，水平堆叠成一排，直到它太小而放不下。

当我使用 col-*-n 时，输入会填满 div 的整个宽度，导致元素（标签和按钮）换行。

我不想做的是将标签、按钮和输入字段分别放在各自的列中，因为这会造成难看的不均匀间隙。

我的意思是，使用 display: inline 块当然很简单。

我在文档中缺少这种风格吗？

这是我的简单粗暴： https://plnkr.co/edit/OOWp2wmxTbeGcZfrpqQp?p=preview

<form class="form-horizontal" role="form">
    <div class="row">
        <div class="col-sm-4 offset-sm-4">
            <div class="form-group pull-right">
                <label for="usr">Filter:</label>
                <input type="text" class="form-control">
                <button type="button" class="btn btn-default" ng-click='clear()'>X</button>
            </div>
        </div>
    </div>
</form>

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

这是一种选择：您可以将 input-groups 用于您的表单，然后将其浮动到 col-sm-12 内的右侧 (float-sm-right)。

body {
  padding-top: 25px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">

    <div class="col-sm-12">
      <form class="float-sm-right">
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-addon bg-faded text-muted">Filter</span>
            <input type="text" id="usr" class="form-control" name="usr">
            <span class="input-group-btn">
              <button type="button" class="btn btn-secondary" ng-click='clear()'>X</button>
            </span>
          </div>
        </div>
      </form>
    </div>

    <div class="col-sm-12">
      <table class="table table-hover table-bordered table-striped">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
</div>

【讨论】：

【解决方案2】：

我认为你想使用form-inline 而不是form-horizontal

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<h4>Previous CODE:</h4>

<form class="form-horizontal" role="form">
    <div class="row">
        <div class="col-sm-4 offset-sm-4">
            <div class="form-group pull-right">
                <label for="usr">Filter:</label>
                <input type="text" class="form-control">
                <button type="button" class="btn btn-default" ng-click='clear()'>X</button>
            </div>
        </div>
    </div>
</form>

<h3>New Code</h3>

<p>Note: According to Bootstrap, Controls only appear inline in viewports that are <strong>at least 576px wide</strong> to account for narrow viewports on mobile devices.</p>
<form class="form-inline">
  <label for="inlineFormInput">Filter:</label>
  <input type="text" class="form-control" id="inlineFormInput">
  <button type="button" class="btn btn-default" ng-click='clear()'>X</button>
</form>

【讨论】：