将输入字段与引导程序3中按钮工具栏的左侧对齐

Question

我正试图将输入字段直接放置在右侧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>

Answer 1

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

我还修正了移动大小的布局，添加了3列(共4列(和2列(共6列(，并在输入字段周围添加了一个"表单组"类。

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

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

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

Answer 2

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