45

我是第一次使用 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>
4

7 回答 7

58

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

如果要添加text-left到标签中，默认情况下会有另一种样式覆盖 this .form-horizontal .control-label。因此，如果您添加：

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

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

于 2015-05-21T10:29:16.023 回答
38

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

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

.form-horizontal .control-label{
    /* text-align:right; */
    text-align:left;
    background-color:#ffa;
}
于 2013-01-11T03:01:29.210 回答
4

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

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

在新的css文件中做

.form-horizontal .control-label{
   text-align:left !important; 
}
于 2014-12-17T20:32:54.280 回答
1

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

于 2015-03-04T15:59:20.947 回答
1

只需添加style="text-align: left"到您的标签。

于 2017-05-03T15:19:25.497 回答
0

text-align:left;对我不起作用，但通过添加display:flex;我能够将标签放在左侧。

于 2021-03-03T19:43:50.043 回答
-3

我遇到了完全相同的问题。我在 bootstrap.min.css 中发现了这个问题。您需要更改标签 label {display:inline-block;}：label {display:block;}

于 2016-04-22T15:32:59.327 回答