Html 如何左对齐这些引导表单项？

我第一次使用Bootstrap，在将表单水平向左对齐时遇到了很多麻烦

列表项应该是水平的，但我希望控件标签（表单标签的引导类）都位于左侧浮动的相同位置

表单包含在一个跨度为7的div中，因为我的站点有两列——7列和4列

下面是我的HTML。如果您在本页的“水平窗体”下查看，您将看到标签是左对齐的，但不是完全左对齐的，因此标签的开头在垂直方向上处于相同的位置

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputSaving">What are you saving for?</label>
        <div class="controls">
            <input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="description">Add a short description</label>
        <div class="controls">
            <textarea class="span4" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="categoryselect">Choose a Category</label>
        <div class="controls">
            <select class="span4">
                <!-- Add some CSS and JS to make a placeholder value-->
                <option value="Kittens">Kittens</option>
                <option value="Keyboard Cat">Keyboard Cat</option>
                <option value="Twitter Bird">Twitter Bird</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="goal">Your Saving Goal</label>
        <div class="controls">
            <input type="text" class="span4" id="goal">
        </div>
    </div>
    <button class="btn btn-large btn-primary" type="button">Submit</button>
</form>

你存钱干什么？
添加简短的描述
选择一个类别
小猫
键盘猫
鸣禽
你的储蓄目标
提交

如果您的问题是如何左对齐表单标签，请查看这是否有帮助：

尝试更改CSS中的文本左/右对齐

.form-horizontal .control-label{
    /* text-align:right; */
    text-align:left;
    background-color:#ffa;
}

---

祝你好运

创建一个覆盖默认样式的新css文件，而不是更改原始引导css类

确保在包含bootstrap.css文件后包含新的css文件

在新的css文件中

.form-horizontal .control-label{
   text-align:left !important; 
}

---

“拉左”是你需要的，看起来你使用的是引导程序2，我不确定它是否可用，考虑Bootstrap 3，除非它是一个巨大的返工！对于Bootstrap 3，但您需要确保每行也有12列，否则您将遇到问题。

只要我的两分钱。如果您使用的是Bootstrap 3，那么我只需在您自己站点的样式表中添加一个额外的样式，用于控制

控制标签的
文本左侧
样式

如果要将
文本左
添加到标签中，默认情况下会有另一种样式覆盖此
.form horizontal.control标签
。因此，如果您添加：

.form-horizontal .control-label.text-left{
    text-align: left;
}

然后，将内置的
文本左
样式正确应用于标签。
我遇到了完全相同的问题。我在bootstrap.min.css中发现了这个问题。您需要更改标签：
label{display:inline block；}
到
label{display:block；}
只需将
style=“text align:left”
添加到标签中即可。
text align:left对我不起作用，但添加了
display:flex我可以将标签移到左边。
“但是您需要确保每行中也有12列，否则会出现问题”——不是这样。如果定义的列少于12列，则数据将仅使用已定义的列，其余列将为空。因此，如果定义一个col-x-4、col-x-5、col-x-1，那么剩下的两列将是空的，所有内容都应该正常工作。（注意，如果您定义的列超过12列，那么第12列之后的所有内容都将换行到下一行）更新了html并修复了提交按钮的对齐方式：我不建议直接修改框架的源代码，尤其是如果您希望能够使其保持最新，也就是说，除非你愿意将存储库和上游代码合并回来。我同意修改框架源代码@djule5不是一个好主意，我的建议是将上述内容添加到站点的CSS中，以便覆盖引导样式。然后你可以更新引导，而不丢失定制，这有意义吗？我建议永远不要使用！重要提示：如果有替代方案，请使用下面Tim B James的解决方案。重要！你会说“左”的答案吗。。。哈哈五年后，我真的相信这应该被标记为正确答案。@AntonioGonzález谢谢！疯狂，那是5年前的事了！为什么这个问题没有正确的答案？哎哟！不惜一切代价避免这样的内联样式！虽然可以工作，但将样式嵌入html会混淆数据（html）和表示规则（css）之间的清晰分离，这是一种糟糕的做法。