Question

我的表单标签显示在文本框的左侧（标签全部对齐，文本框全部左对齐）。

现在它们都出现在我的文本框之上：

<form action="" method="post">
    <div class="form-horizontal">
        <label for="test">Test</label>
        <input id="test" type="text" class="form-control" disabled/>
    </div>
    <div class="form-horizontal">
        <label for="more">More</label>
        <input id="more" type="text" class="form-control" disabled/>
    </div>
</form>

Answer 1

使用bootstrap的网格。这是指向bootply的链接。

<form class="form-horizontal" action="" method="post">
    <label class="col-sm-2 control-label" for="test">Test</label>
    <div class="col-sm-10">
        <input id="test" type="text" class="form-control" disabled/>
    </div>
    <label class="col-sm-2 control-label" for="more">More</label>
    <div class="col-sm-10">
        <input id="more" type="text" class="form-control" disabled/>
    </div>
</form>

Answer 2

没有你的CSS，我无法确定，但请尝试：

label {
    display: inline;
}

如果您提供CSS以及HTML，将会很有帮助。

Answer 3

答案/示例在引导示例中是正确的：

http://getbootstrap.com/css/#forms-horizontal

您可以将表单结构与之匹配。

对齐表单控件Bootstrap

3 个答案: