html - 如何左对齐这些 Bootstrap 表单项？

Question

我是第一次使用 Bootstrap，在将此表单水平左对齐时遇到了很多问题。

列表项是水平的，它们应该是水平的，但我希望控件标签(表单标签的 Bootstrap 类)都在向左浮动的相同位置。

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

下面是我的 HTML。如果您在本页的“水平表格”下查看 http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms ，您会看到标签左对齐，但不是绝对左对齐，因此标签的开头在垂直方向上处于相同位置。

<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>

Answer 1

只是我的两分钱。如果您使用的是 Bootstrap 3，那么我会在您自己网站的样式表中添加一个额外的样式，该样式表控制 control-label 的 text-left 样式。

如果您要将 text-left 添加到标签，默认情况下会有另一种样式覆盖此 .form-horizo​​ntal .control-label。所以如果你添加:

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

然后内置的 text-left 样式正确地应用于标签。