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

问题描述

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

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

解决方法

由于Bootstrap中的12列网格，您的列最多必须加12。我已经将输入2列和按钮4列。

我还固定了移动设备尺寸布局，方法是在3列的4列后面加上2列的6列，并在输入字段周围添加“表单组”类。

已更新为在按钮列中添加“文本右”，并从三个按钮周围删除了“按钮工具栏”。

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

      .problem {
        display: inline-flex;
        height: 100%;
        background-color: blue;
      }

      .cell {
        align-self: stretch;
        width: 100px;
      }

,

在@ k123的帮助下，我得以提出一种似乎可行的解决方案。但是，如果有更好的方法可以做到这一点，我很乐意选择一个更好的答案。

我最终将form-group放在最后一个div中，并使用pull-left类将其强制到按钮的左侧。绝对不是最理想的解决方案，但在大型显示器上看起来“足够好”。

<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">
      <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">
    </div>
    <div class="col-xs-6 col-sm-4 text-right">
      <div class="form-group pull-left">
        <label class="control-label">&nbsp;</label>
        <input type="search" class="form-control" />
      </div>
      <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>