如何左对齐这些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,那么我只需在您自己网站的样式表中添加一个额外的样式来控制text-left样式control-label.

如果要添加text-left到标签,默认情况下会有另一种样式覆盖它.form-horizontal .control-label.所以,如果你添加:

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

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

Answer 2

如果你说你的问题是如何左对齐表单标签,看看这是否有帮助:http:
//jsfiddle.net/panchroma/8gYPQ/

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

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

祝好运!

Answer 3

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

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

在新的css文件中做

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