插入与标题标签内嵌的输入字段

Question

我想在一行中有h3文本和输入字段（h3与左边对齐，输入与右边对齐，具有相同的垂直位置）。

我尝试过form-inline类，但它不能按我想要的方式工作。

代码：

<div class="col-md-6"> 
     <form class="form-inline"> 
     <div class="form-group"> 
      <h3 class="pull-left">Upcoming Events</h3> 
      <input type="text" class="form-control pull-right" placeholder="Country/Region"> 
     </div> 
     </form> 
    </div> 

这里是如何的样子（我添加第二列与硬编码的利润，以显示我多么希望它看起来像）：http://www.bootply.com/f7QEh7oeqF

任何想法，我怎么能格式化我想要的方式？

Answer 1

只需添加边距并将.form-group宽度设置为100％即可。 http://www.bootply.com/uvjb30F2ji

Answer 2

在form-group类中取消display: inline-block;。

然后，您可以根据需要修改头类的margin-top属性，以便将头与输入字段垂直对齐。

Answer 3

这样做对你的表格代替：

<form class="form-horizontal"> 
    <div class="form-group"> 
     <label class="col-sm-6 h3">Upcoming Events</label> 
     <div class="col-sm-6"> 
      <input type="text" class="form-control" placeholder="Country/Region" /> 
     </div> 
    </div> 
</form> 

，并添加这个CSS：

.h3 { 
    margin-top: 0; 
    line-height: 34px; 
} 

，如果形式是太远的名单上面，你可以添加以下CSS：

.form-group { 
    margin-bottom: 0; 
} 

注意：我将h3标签更改为label标签，.h3类，因为表单控件需要与其关联的标签才能使屏幕阅读器正常工作。通常情况下不是一笔巨额交易，但有助于获得可用性

见plnkr