Twitter 引导程序和表单答案

【问题标题】：Twitter Bootstrap and FormsTwitter 引导程序和表单
【发布时间】：2012-07-31 02:50:14
【问题描述】：

我正在使用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>

【问题讨论】：

使用 CSS inline 或 float: left; 你的 <div>

标签： html css twitter-bootstrap

【解决方案1】：

这对我有用

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

是这样渲染的

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

有助于了解如何设置引导程序。

.control-label 类是表单的左侧指示器。这需要表单的左侧 140px 并向左浮动。 .controls 类是表单容器的右侧，它只是将 160px 的边距应用到自身而不浮动。

知道了这一点，您就可以像对待普通 HTML 一样对待 Bootstrap。您可以简单地将所有输入包含在同一个控件中，如下所示：

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

如果您希望对齐匹配，请使用一些技巧，将水平集中的第一个标签设置为 .control-label，如下所示：

<div class="control-group">
    <label class="control-label">State:</label>
    <div class="controls">
        <input class="span2" id="state" name="State" type="text" value="UT">

【讨论】：

这个不太行。输入框仍然堆叠在一起，但标签位于每个输入上方。如果我设置标签，就像在您的第二个代码示例中一样，那么我会得到标签、标签、标签、输入、输入输入垂直堆叠。