css - 在 Bootstrap3 中将输入字段对齐到按钮工具栏的左侧

Question

我正在尝试将我的输入字段直接btn-toolbar放在右侧 3 个按钮 () 的左侧。我不知道为什么这这么难。我尝试更改输入字段的宽度并使用各种实用程序类但没有成功。任何帮助，将不胜感激。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-2">
        <div class="form-group">
          <label class="control-label">Start Date</label>
          <div>
            <input type="text" class="form-control" />
          </div>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="form-group">
          <label class="control-label">End Date</label>
          <div>
            <input type="text" class="form-control" />
          </div>
        </div>
      </div>
      <div class="col-sm-2">
        <label class="control-label">&nbsp;</label>
        <div>
          <button type="button" class="btn btn-success">Get Data</button>
        </div>
      </div>
      <div class="col-sm-6">
        <label class="control-label">&nbsp;</label>
        <input type="search" class="form-control"/>
        <div class="pull-right">
          <label class="control-label">&nbsp;</label>
          <div class="btn-toolbar">
            <button type="button" class="btn btn-success">Create</button>
            <button type="button" class="btn btn-success">Create</button>
            <button type="button" class="btn btn-danger">Close</button>
          </div>
        </div>
      </div>
    </div>
    <table class="table table-condensed table-striped table-bordered">
      <thead>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

标签： csstwitter-bootstrap-3

Answer 1

在一行中，您的列必须加起来 12，因为它是 Bootstrap 中的 12 列网格。我将输入设为 2 列，将按钮设为 4 列。

我还通过添加 3 个 4 列和 2 个 6 列并在输入字段周围添加一个“表单组”类来修复移动尺寸布局。

更新为将“text-right”添加到按钮列，并从三个按钮周围删除“button-toolbar”。

再次更新添加了更多断点，因此大屏幕尺寸看起来更好。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container-fluid">
    <div class="row">
      <div class="col-xs-4 col-sm-2">
        <div class="form-group">
          <label class="control-label">Start Date</label>
          <div>
            <input type="text" class="form-control" />
          </div>
        </div>
      </div>
      <div class="col-xs-4 col-sm-2">
        <div class="form-group">
          <label class="control-label">End Date</label>
          <div>
            <input type="text" class="form-control" />
          </div>
        </div>
      </div>
      <div class="col-xs-4 col-sm-2 col-lg-1 text-right">
        <label class="control-label">&nbsp;</label>
        <div>
          <button type="button" class="btn btn-success">Get Data</button>
        </div>
      </div>
      <div class="col-xs-6 col-sm-2 col-md-2 col-lg-3 col-md-offset-1 col-lg-offset-2">
        <div class="form-group">
          <label class="control-label">&nbsp;</label>
          <input type="search" class="form-control"/>
        </div>
      </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-right">
        <label class="control-label">&nbsp;</label>
        <div>
          <button type="button" class="btn btn-success">Create</button>
          <button type="button" class="btn btn-success">Create</button>
          <button type="button" class="btn btn-danger">Close</button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <table class="table table-condensed table-striped table-bordered">
          <thead>
            <tr>
              <th>Col1</th>
              <th>Col2</th>
              <th>Col3</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
</div>