引导标签和输入字段不显示水平答案

【问题标题】：Bootstrap label and input filed not displaying horizontal引导标签和输入字段不显示水平
【发布时间】：2013-09-30 19:49:05
【问题描述】：

我已经从 bootstrap 复制并粘贴了示例代码。我已经包含了引导 CSS 和 JS 文件和 jQuery 库。 Base CSS - Bootstrap

由于某些原因，标签和输入字段显示为内联。有人可以看看我做错了什么吗？

<form class="form-horizontal">
          <div class="control-group">
            <label class="control-label" for="inputEmail">Email</label>
            <div class="controls">
              <input type="text" id="inputEmail" placeholder="Email">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="inputPassword">Password</label>
            <div class="controls">
              <input type="password" id="inputPassword" placeholder="Password">
            </div>
          </div>
          <div class="control-group">
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox"> Remember me
              </label>
              <button type="submit" class="btn">Sign in</button>
            </div>
          </div>
  </form>

【问题讨论】：

你的form标签看起来不错，我相信你忘了添加container div class & <!DOCTYPE html> HTML5
把你的代码放在 jsfiddle 上。
您标记了问题 Bootstrap 3，但您链接到 Bootstrap 2 文档，并且您拥有的代码也是 Bootstrap 2。如果您将上述代码挂钩到 Bootstrap 3 CSS，它不会工作。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

尝试使用 .form-group 而不是 .control-group 类。

记得在form标签后面设置一个带有.col--*类的容器。

例如

 <form class="" role="form" method="POST" action="{form_action}" onsubmit="return ValidateForm()" enctype="multipart/form-data">

     <div class="col-sm-6 col-md-6">      
        <div class="form-group">
           <label class="control-label label-fw">Vendida?&ensp;</label>
           {chk_sold}
        </div><!-- form group -->

        <div class="form-group">
           <label for="txt_title" class="control-label label-fw">T&iacute;tulo&ensp;</label>
           <input name="txt_title" type="text" class="form-control input" id="txt_title" value="{txt_title}" placeholder="titulo del producto">
        </div><!-- form group -->

        <div class="form-group">
            <label for="txt_title" class="control-label label-fw">Categor&iacute;a&ensp;</label>
           {cbo_type}
        </div><!-- form group -->

        <div class="">
           <label for="txt_aution_date_d" class="control-label label-fw">Fecha&ensp;</label>
           <input name="txt_auction_date_d" type="text" class="form-control" id="txt_auction_date_d" value="{txt_auction_date_d}" placeholder="MM/DD/AAAA">
        </div><!-- form group -->                       

     </div><!-- col-sm-6 col-md-6 -->
  </form>

让我知道这是否有效。

【讨论】：