Question

这段代码的输出（我试图在jsFiddle上发布它，但它现在似乎没有工作）看起来很合理，但是，标签左边有很多空间“浪费”。这些领域本身就像它们在这里一样宽。

enter image description here

这是实际情况中存在的问题，其中有更多的字段和有限的空间。我希望能够独立于总控制组宽度控制标签宽度，我希望它保持与字段右对齐，并且（最重要的是）我想要一个较短的标签导致字段向左移动（如果只是破坏控制标签宽度，则不会发生这种情况。

我不喜欢钻研LESS，这是我唯一的选择吗？任何建议表示赞赏。

    <div class="container-narrow" style="width:700px">
        <div class="content">
            <div class="row-fluid">
                <div class="span5">
                    <form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
                        <div class="control-group">
                            <label class="control-label required" for="Step1_email">Email:</label>
                            <div class="controls">
                                <input class="span12" size="50" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="span7">
                    <form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
                        <div class="control-group">
                            <label class="control-label required" for="Step1_email">Thing1</label>
                            <div class="controls">
                                <input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</body>

Answer 1

一个选项是在表单上使用.form-inline以允许表单元素在同一行上。

这样的事情：

<form class="form-inline">
    <label>Email:
        <input type="text" class="span1" name="email" />
    </label>
    <label>Thing1
        <input type="text" class="span3" name="thing1" />
    </label>
</form>

如果您想在第二个标签之前留出更多间距，则需要自定义CSS。

Answer 2

＆lt; label class =“control-label required” style =“width：100px; padding-left：60px;” for =“Step1_email”＆gt;电子邮件：＆lt; / label＆gt; < / p>

keep（width + padding-left）== 160

是否可以在Bootstrap中调整控制标签宽度？

2 个答案: