与引导水平形式正确对齐答案

【问题标题】：proper alignment with bootstrap horizontal forms与引导水平形式正确对齐
【发布时间】：2014-02-04 08:33:03
【问题描述】：

我将引导站点中显示的代码用于水平表单。我已经包含了必要的 bootstrap.css 文件。但是我的水平表格没有按预期对齐。标签在最左边，表单从浏览器边距的 25% 开始，水平延伸到页面末尾，表单上下相互接触，没有任何间距。

引导页面说明了使用 .form-horizontal 类，但我不知道应该在哪里使用它。帮助将不胜感激。在下面粘贴我的代码。

<form role="form" class=".form_horizontal">

        <div class="form-group">
                <label for="category_type" class="col-sm-2 control-label">Category</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="category_type" placeholder="Select a category">
                </div>
        </div>

        <div class="form-group">
                <label for="project_title" class="col-sm-2 control-label">Title</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="project_title" placeholder="Enter Title here">
                </div>
        </div>

        <div class="form-group">
                <label for="quarter" class="col-sm-2 control-label">Quarter/Year</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="quarter" placeholder="Enter Quarter here Eg. Q2,2013">
                </div>
        </div>

         <div class="form-group">
                <label for="project_description" class="col-sm-2 control-label">Project Description</label>
                <div class="col-sm-10">
                <textarea class="form-control" id="project_description" rows="3" placeholder="Enter Description here"></textarea>
                </div>
        </div>

        <div class="form-group">
                <label for="contributors" class="col-sm-2 control-label">Contributors</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="contriutors" placeholder="Contributors">
                </div>
        </div>
</form>

【问题讨论】：

你能在这里复制同样的东西吗？ jsbin.com/ACAQEqAS/1
这和我在浏览器中看到的一样！标签需要足够靠近表单框，并且它们之间应该有一些垂直填充，我想根据我的需要更改它们的宽度。

标签： jquery html css forms twitter-bootstrap

【解决方案1】：

我不确定，但也许是这样：

  <form role="form" class=".form_horizontal">

应该改成这个

   <form role="form" class="form-horizontal">

类名在引导程序中看起来很奇怪

【讨论】：

【解决方案2】：

我让它工作了。

问题是<form role="form" class=".form_horizontal">

应该是<form role="form" class="form-horizontal">

【讨论】：