Bootstrap 内联表单字段 - 城市、州、邮编内联但带有标签而不是按钮答案

【问题标题】：Bootstrap Inline Form Fields - City, State, Zip inline but with labels and not buttonsBootstrap 内联表单字段 - 城市、州、邮编内联但带有标签而不是按钮
【发布时间】：2018-01-12 19:12:29
【问题描述】：

我已经看到尝试并排获取内联输入的示例，但我知道如何使用输入组插件将这些内联输入与标签放在一边，而不是标签看起来像按钮部分。

我已关注 bootstrap vertical inline 示例 Christina 的回复。但是，您如何将标签本身放在同一行而不是按钮中？所以城市州邮政编码，但作为输入提示旁边的标签。

当我尝试删除输入组 div 并将包含输入组插件的跨度替换为 LABEL 元素时，标签会出现在输入提示上方而不是它的一侧。

【问题讨论】：

标签： twitter-bootstrap-3

【解决方案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

这样的？

【讨论】：

由于窗口会响应，请在打开fiddle时展开输出窗口。
我尝试了内联表单，但我有一个很大的表单，只有一些提示在一行上，比如城邦邮编。因此，如果我对 bootstrap 有一点了解，我需要使用 form-horizontal。但似乎你不能真正使用“粘”在输入控件上的标签。它们不断出现在输入控件上方。我不希望“按钮”外观中的标签文本
在网格中显示表单输入的最佳选择，即引导程序中的 col--。如果您将它们分解为组件并尝试为每一行设置网格，那就可以了。让我知道您的表单结构，以便我为您提供更多帮助。

【解决方案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">

表单类。

【讨论】：