Bootstrap内联表单字段 - 城市，州，邮编内联但带有标签而非按钮

Question

我已经看过尝试并排获取内联输入的示例，但是我如何获得带有标签的内联输入，而不是使用标签看起来像按钮部分的标签输入组插件。

我已经按照bootstrap vertical inline示例克里斯蒂娜的回应。但是，如何将标签本身放在同一行而不是按钮？所以City State Zipcode，但作为输入提示旁边的标签。

当我尝试删除输入组div并用LABEL元素替换包含input-group-addon的范围时，标签会在输入提示上方而不是在其旁边。

Answer 1

<form class="form-inline">
  <div class="input-group">
      <span class="input-group-addon">City</span>
      <input id="msg" type="text" class="form-control" name="msg" placeholder="Enter City Name">
    </div>

    <div class="input-group">
      <span class="input-group-addon">State</span>
      <input id="msg" type="text" class="form-control" name="msg" placeholder="Enter State Name">
    </div>

    <div class="input-group">
      <span class="input-group-addon">Zipcode</span>
      <input id="msg" type="text" class="form-control" name="msg" placeholder="Zip Code">
    </div>
</form>

JSFiddle

这样的东西？

Answer 2

看起来为了获得附加到输入组的标签，您可以使用CSS来获得所需的外观。所以我把CSS改成了这个:(现在我在写作中使用了Christina的链接问题的答案来做这个并添加了这个css来得到你在下面看到的内容。她在展示如何让按钮彼此相邻方面做得很好。  下面的注释图像使用col-6的两个部分来获取单独的列。）

.customLabel {
    height:20px;
    font-weight: bold;        
    text-align: left;        
    background-color: #fff;        
    border:none; 
}

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

这让我看到了输入提示旁边的正常标签。 这也是使用

<form class="form-horizontal">

表格。