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

Question

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

45

我是第一次使用Bootstrap，目前在调整这个form-horizontal的左对齐方面遇到了很多问题。

列表项水平排列得很好，但我希望控制标签（即Bootstrap表单标签类）都浮动到同一位置，靠左对齐。

该表单包含在一个div中，该div具有7个span大小，因为我的网站是双列——7和4列。

以下是我的HTML。如果您查看此页面上“Horizontal Forms”下面的内容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>

- Tom Maxwell

1

为什么这个问题没有标记正确答案？ - Tim B James

7个回答

40

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

尝试在CSS中更改文本对齐方式为左对齐 / 右对齐。

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

- David Taiaroa

1

更新了HTML并修复了提交按钮的对齐：http://jsfiddle.net/n3f25Lkd/ - ganders

我不建议直接修改框架的源代码，特别是如果您想保持其最新状态的话。除非您愿意派生存储库并合并上游代码，否则不要这么做。 - djule5

同意@djule5的观点，修改框架源代码并不是一个好主意。我的建议是将上述内容添加到网站的CSS中，以覆盖Bootstrap的样式。这样，您就可以更新Bootstrap而不会失去自定义内容，这个方案可行吗？ - David Taiaroa

4

不要修改原始的bootstrap css类，而是创建一个新的css文件来覆盖默认样式。

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

在新的css文件中执行以下操作

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

- Ruben Benjamin

2

我建议如果有替代方案，永远不要使用!important：https://dev59.com/questions/FHA65IYBdhLWcg3wqAWt - cederlof

请使用下面 Tim B James 的解决方案。重要提示！这是一种不好的做法。 - Ruben Benjamin

1

只需在标签中添加 style="text-align: left"。

- Bruno Ciconelle

哎呀！千万不要使用内联样式！虽然它可以工作，但这是一种不好的做法，将样式嵌入HTML中会混淆数据（HTML）和展示规则（CSS）之间的清晰分离。 - Shawson

1

“pull-left”是您需要的，看起来您正在使用Bootstrap 2，我不确定是否可用，请考虑使用Bootstrap 3，除非这是一个巨大的改造！...适用于Bootstrap 3，但您需要确保每行都有12列，否则会出现问题。

- AlpharettaTechy

但是你需要确保每一行都有12列，否则你会遇到问题--这不是真的。如果你定义的列少于12列，那么你的数据只会占用你定义的列，其余的列就会是空白的。所以，如果你定义了col-x-4、col-x-5和col-x-1，那么剩下的两列就会是空白的，一切都应该正常工作。（请注意，如果你定义了超过12列，那么第12列之后的所有内容都会换到下一行）。 - ganders

1

text-align:left; 对我没有作用，但是通过添加 display:flex; 我成功将标签置于左侧。

- AtLeastTheresToast

-3

我曾经遇到过完全相同的问题。我在bootstrap.min.css中找到了问题所在。你需要更改标签：label {display:inline-block;}为label {display:block;}。

- Laser One Jim

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim B James · Accepted Answer

仅是我的个人观点。如果你在使用Bootstrap 3，那么我建议你在自己网站的样式表中添加一个额外的样式，控制control-label的text-left样式。

如果你要添加text-left到标签上，那么默认情况下会有另一个样式覆盖它：.form-horizontal .control-label。因此，如果你添加：

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

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