Question

我错过了使用bootstrap的东西。我想要一个标签/输入/按钮组合，向右推，一行在我的桌子上方。

它应该保持相同的尺寸，水平堆叠成一排，直到它太小而不适合。

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

我所做的不想要做的是将标签，按钮和输入字段分别放在它们自己的col中，因为这样会产生难看的不均匀间隙。

我的意思是，它对于display：inline block来说当然很简单。

我在文档中错过了这种风格吗？

这是我的简单说法： 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>

Answer 1

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

＆＃13;

<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>

＆＃13;

Answer 2

以下是一个选项：您可以对表单使用input-groups，然后将其浮动到float-sm-right内的右侧（col-sm-12）。

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 个答案: