css - 如何使用 Twitter Bootstrap 在同一行中显示标签和文本框

Question

<div class="control-group">
    <label for="name" class="control-label"><p class="text-info">Name&nbsp;<i class="icon-star"></i></p></label>
    <div class="controls">
        <input type="text" id="name" placeholder="Enter your name" class="span3">
    </div>

这对我不起作用，我不想为此使用“form-horizo​​ntal”类或表格。我尝试过使用 row 和 row-fluid 类，但它不起作用。

Answer 1

您可以使用<div class="form-horizontal">. 您不需要form使用form-horizontal.

示例：

<div class="form-horizontal">
    <div class="control-group row-fluid form-inline">
        <label for="name" class="control-label"><p class="text-info">Name&nbsp;<i class="icon-star"></i></p></label>
        <div class="controls">
            <input type="text" id="name" placeholder="Enter your name" class="span3">
        </div>
    </div>
</div>

Answer 2

您想要水平表单布局。这可以通过将代码包装在具有水平形式的类的 div 之间来实现。

<div class="form-horizontal">
   <div class="control-group">
    <label for="name" class="control-label"><p class="text-info">Name&nbsp;<i class="icon-star"></i></p></label>
    <div class="controls">
        <input type="text" id="name" placeholder="Enter your name" class="span3">
    </div>
</div>

要了解更多信息，请单击此处