html - 推特 Bootstrap : How to layout multiple input-prepend's side-by-side on one row

Question

在不知疲倦地浏览了 Bootstrap 文档之后，我似乎无法按照我需要的方式在此表单上布置下面的 input-prepend 插件输入(黄色下划线):

您会注意到“实际门尺寸”行的布局不正确且布局不正确。我正在使用标准的 row-fluid 和 span* 约定，它对其余部分工作得很好。我真的只是想制作一个整洁的高度/宽度/深度前置输入选项集，它们彼此相邻 float (并且不会溢出)，但是重要的是我充分利用 Bootstrap 以确保字段然后下降在移动设备上位于彼此下方，因为此表单将主要通过 iPad 访问。

如果有人可以建议对下面的 HTML 进行一些修改，以提供一种巧妙的方式来布置这三个输入，那就太好了(忽略插件高度不匹配的事实，我会修复它)。

我还包含了“密封的顶部底部/门饰面”行，这样您就可以看到我是如何使用我的双列方法的，效果很好。

<!-- CULPRIT START -->
<div class="row-fluid">
    <div class="span12">
        <div class="span4">
            <div class="control-group">
                <label for="ActualDoorSizeHeight" class="control-label">Actual Door Size:</label>
                <div class="controls">
                    <div class="input-prepend">
                        <span class="add-on">H</span><input id="ActualDoorSizeHeight" class="input-block-level" type="text" data-bind="value: vm.ActualDoorSizeHeight" />
                    </div>
                </div>
            </div>
        </div>
        <div class="span4">
            <div class="control-group">
                <label for="ActualDoorSizeHeight" class="control-label"></label>
                <div class="controls">
                    <div class="input-prepend">
                        <span class="add-on">W</span><input id="Text5" class="input-block-level" type="text" data-bind="value: vm.ActualDoorSizeWidth" />
                    </div>
                </div>
            </div>
        </div>
        <div class="span4">
            <div class="control-group">
                <label for="ActualDoorSizeHeight" class="control-label"></label>
                <div class="controls">
                    <div class="input-prepend">
                        <span class="add-on">D</span><input id="Text11" class="input-block-level" type="text" data-bind="value: vm.ActualDoorSizeDepth" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- // CULPRIT END -->
<div class="row-fluid">
    <div class="span12">
        <div class="span6">
            <div class="control-group">
                <label for="SealedTopBottom" class="control-label">Sealed Top Bottom:</label>
                <div class="controls">
                    <input id="SealedTopBottom" type="text" class="input-block-level" data-bind="value: vm.Inspection.SealedTopBottom" />
                </div>
            </div>
        </div>
        <div class="span6">
            <div class="control-group">
                <label for="FinishOfDoor" class="control-label">Finish of Door:</label>
                <div class="controls">
                    <input id="FinishOfDoor" type="text" class="input-block-level" data-bind="value: vm.Inspection.FinishOfDoor" />
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我认为您想要的是输入前置与内联表单的组合，而不是使用跨度。 http://twitter.github.io/bootstrap/2.3.2/base-css.html#forms

我刚刚快速浏览了 JSFiddle。试试这个，看看它是否适合你:http://jsfiddle.net/6jAhe/

<!-- CULPRIT START -->
<div class="row-fluid">
    <div class="span12">
        <div class="control-group form-inline">
            <label for="ActualDoorSizeHeight" class="control-label">Actual Door Size:</label>
            <div class="input-prepend">
                <span class="add-on">H</span><input id="ActualDoorSizeHeight" class="" type="text" data-bind="value: vm.ActualDoorSizeHeight" />
            </div>
            <div class="input-prepend">
                <span class="add-on">W</span><input id="Text5" class="" type="text" data-bind="value: vm.ActualDoorSizeWidth" />
            </div>
            <div class="input-prepend">
                <span class="add-on">D</span><input id="Text11" class="" type="text" data-bind="value: vm.ActualDoorSizeDepth" />
            </div>
        </div>
    </div>
</div>
<!-- // CULPRIT END -->