1

我正在使用Twitter Bootstrap。在表单中，我可以进行水平布局和垂直布局，但类在<form>标签上。那么，如何在我想节省空间的地方做一点点，然后水平放置几个输入框，其余的垂直放置？

我有一个看起来像这样的表格：

Address [__________________]
City [___________]
State [__]
Zip [_____]
Country [____]

但我希望它看起来像这样：

Address [__________________]
City [___________]
State [__] Zip [_____] Country [____]

请帮助CSS。

这是我的代码：

<form class="form-horizontal">
    <fieldset>
        <div class="row-fluid"> 
            <div class="span6">
                <div class="control-group">
                    <label class="control-label" for="Address">Mailing Address</label>
                    <div class="controls">
                        <input data-val="true" data-val-required="Required" id="mailing" name="Address" type="text" value="1313 Mockingbird Lane" class="valid">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="City">City</label>
                    <div class="controls">
                        <input class="span3 valid" id="city" name="City" type="text" value="Kaysville">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="State">State</label>
                    <div class="controls">
                        <input class="span2" id="state" name="State" type="text" value="UT">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="PostalCode">Zip</label>
                    <div class="controls">
                        <input class="span2" id="postalCode" name="PostalCode" type="text" value="12345">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="Country">Country</label>
                    <div class="controls">
                        <input class="span3" id="country" name="Country" type="text" value="US">
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</form>
4

3 回答 3

3

这对我有用

<div class="control-group">
    <label class="control-label" for="inputPLZ">PLZ*</label>
    <div class="controls">
        <input type="text" class="input-mini" id="inputPLZ">                                        
        Ort*
        <input type="text" class="input-medium" id="inputOrt">
    </div>
</div>

它是这样渲染的

在此处输入图像描述

于 2012-07-30T18:50:14.410 回答
0

Helps to understand how bootstrap is set up.

The .control-label class is the left side indicator of a form. This takes the left 140px of the form and floats left. The .controls class is the right side of container of a form, and simply applies a margin left of 160px to itself without floating.

Knowing this, you can treat Bootstrap like normal HTML. You can simply include all the inputs in the same control, like so:

<div class="control-group">
    <div class="controls">
        State: <input class="span2" id="state" name="State" type="text" value="UT">
        Zip: <input class="span2" id="postalCode" name="PostalCode" type="text" value="12345">
        Country: <input class="span3" id="country" name="Country" type="text" value="US">
    </div>
</div>

If you want the alignment to match up, use a little bit of trickery by making the first label in your horizontal set the .control-label like so:

<div class="control-group">
    <label class="control-label">State:</label>
    <div class="controls">
        <input class="span2" id="state" name="State" type="text" value="UT">
于 2012-07-26T15:10:10.417 回答
0

将 state、zip 和 country 包装在一个 div 中，然后将子元素向左浮动，它们应该对齐。虽然我没有使用 Bootstrap 的经验，所以不知道这是否会影响任何事情

于 2012-07-26T15:01:15.123 回答