6

在不知疲倦地浏览了 Bootstrap 文档之后，我似乎无法input-prepend按照我在此表单上需要的方式来布局下面的插件输入（以黄色下划线）： 在此处输入图像描述

您会注意到“实际门尺寸”行的布局不正确并且布局不正确。我正在使用标准row-fluid和span*约定，它对其他人来说效果很好。我真的只是想制作一个整洁的高度/宽度/深度前置输入选项集，它们彼此相邻浮动（并且不会溢出），但是重要的是我充分利用引导程序来确保字段然后下降在移动设备上彼此下方，因为此表单将主要通过 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>
4

1 回答 1

5

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

我刚刚快速了解了 JSFiddle。试试这个，看看它是否适合你：http: //jsfiddle.net/6jAhe/</p> 

<!-- 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 -->
于 2013-07-29T05:58:55.977 回答