不能对齐水平形式的按钮（非内联）（引导）

Question

在下面的代码中，我有2个按钮和3个标签的输入。我希望按钮与输入对齐，但它们与标签对齐。我尝试了内联表单，但是在侧面贴上标签不会。

什么是最好的选择来完成这个没有太多的破坏bootstrap？

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

 
<form role="form"> 
 
    <div class="row"> 
 
    <div class="form-group col-xs-1"> 
 
     <button type="button" class="btn btn-success btn-add">+</button> 
 
    </div> 
 
    <div class="form-group col-xs-3"> 
 
     <label>Text Input</label> 
 
     <input class="form-control"> 
 
     <p class="help-block">Example block-level help text here.</p> 
 
    </div> 
 
    <div class="form-group col-xs-3"> 
 
     <label>Text Input</label> 
 
     <input class="form-control"> 
 
     <p class="help-block">Example block-level help text here.</p> 
 
    </div> 
 
    <div class="form-group col-xs-3"> 
 
     <label>Text Input</label> 
 
     <input class="form-control"> 
 
     <p class="help-block">Example block-level help text here.</p> 
 
    </div> 
 
    <div class="form-group col-xs-2"> 
 
     <button type="submit" class="btn btn-default">Filter</button> 
 
    </div> 
 
</form>

Answer 1

由于您使用的引导，你可能不希望自定义CSS太多，除非你真的知道你在做什么。

因此，尝试使用相同的结构，然后您将得到相同的结果，将<label>&nbsp;</label>添加到这些按钮作为占位符，因此它们的行为与屏幕更改相同。

同时添加form-control到提交按钮，让自举处理它：d

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

 
<form role="form"> 
 
    <div class="row"> 
 
    <div class="form-group col-xs-1"> 
 
     <label>&nbsp;</label> 
 
     <button type="button" class="btn btn-success btn-add">+</button> 
 
    </div> 
 
    <div class="form-group col-xs-3"> 
 
     <label>Text Input</label> 
 
     <input class="form-control"> 
 
     <p class="help-block">Example block-level help text here.</p> 
 
    </div> 
 
    <div class="form-group col-xs-3"> 
 
     <label>Text Input</label> 
 
     <input class="form-control"> 
 
     <p class="help-block">Example block-level help text here.</p> 
 
    </div> 
 
    <div class="form-group col-xs-3"> 
 
     <label>Text Input</label> 
 
     <input class="form-control"> 
 
     <p class="help-block">Example block-level help text here.</p> 
 
    </div> 
 
    <div class="form-group col-xs-2"> 
 
     <label>&nbsp;</label> 
 
     <button type="button" class="btn btn-default form-control">Filter</button> 
 
    </div> 
 
    </div> 
 
</form>

Answer 2

应用display:inline-block到label和input应该让他们流动到同一行，但可能仅仅需要display:inline

Answer 3

最快（而不是有点脏）方法可以让我觉得这样做是为了适应与Bootstrap将引入占位符标签，然后隐藏它们。但是请注意，这是很脆弱的，因为它代表 - 如果布局允许过于压缩宽度方向（或者，如果标签文本被允许换行），仍然会出现错位：

.invisible-label { 
 
    visibility: hidden; 
 
    display: block; 
 
}

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

 
<form role="form"> 
 
    <div class="row"> 
 
    <div class="form-group col-xs-1"> 
 
     <label class="invisible-label">&nbsp;</label> 
 
     <button type="button" class="btn btn-success btn-add">+</button> 
 
    </div> 
 
    <div class="form-group col-xs-3"> 
 
     <label>Text Input</label> 
 
     <input class="form-control"> 
 
     <p class="help-block">Example block-level help text here.</p> 
 
    </div> 
 
    <div class="form-group col-xs-3"> 
 
     <label>Text Input</label> 
 
     <input class="form-control"> 
 
     <p class="help-block">Example block-level help text here.</p> 
 
    </div> 
 
    <div class="form-group col-xs-3"> 
 
     <label>Text Input</label> 
 
     <input class="form-control"> 
 
     <p class="help-block">Example block-level help text here.</p> 
 
    </div> 
 
    <div class="form-group col-xs-2"> 
 
     <label class="invisible-label">&nbsp;</label> 
 
     <button type="submit" class="btn btn-default">Filter</button> 
 
    </div> 
 
    </div> 
 
</form>