如何使这些Bootstrap表单项保持一致？ [英] How do I left align these Bootstrap form items?

问题描述

我第一次使用Bootstrap，并且在排列此表单时遇到很多麻烦 - 水平向左。

I'm using Bootstrap for the first time, and am having a lot of trouble aligning this form-horizontal to the left.

列表项是水平的，因为它们应该是，但我想控制标签（表单标签的Bootstrap类）都在相同的位置浮动左。

The list items are horizontal, as they should be, but I want the control-labels (the Bootstrap class for form labels) to all be at the same position floated left.

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

The form is contained in a div with a span of 7, as my site is two columns -- 7 and 4 columns.

下面是我的HTML。如果您查看此页面上的水平表单 http：//accounts.tao。 tw.shuttle.com/examples_bootstrap/basecss/forms ，您会看到标签左对齐，但不是绝对左对齐，以便标签的开头垂直位于相同的位置。

Below is my HTML. If you look under "Horizontal Forms" on this page http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms, you'll see that the labels are left aligned, but not absolutely left-aligned so that the beginning of the labels are at the same position vertically.

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

推荐答案

如果你说你的问题是如何离开对齐表单标签，看看这是否有帮助：

http://jsfiddle.net/panchroma/8gYPQ/

If you are saying that your problem is how to left align the form labels, see if this helps:
http://jsfiddle.net/panchroma/8gYPQ/

尝试在CSS中向左/向右调整文本。

Try changing the text-align left / right in the CSS

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

祝你好运！

这篇关于如何使这些Bootstrap表单项保持一致？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！