Bootstrap显示表单标签内联

Question

我想让2个表单标签与Twitter Bootstrap一起显示。

表单输入显示为内联，因为它们的输入大类。如何在标签上实现相同的行为？我希望标签显示在内部和相应的输入字段之上。

这是我的HTML：

<div class="control-group">
      <label class="control-label" for="likedcolors">Kleuren die u wel aanspreken*:</label>
      <label class="control-label" for="dislikedcolors">Kleuren die u niet aanspreken*:</label>
      <div class="controls">
        <input type="text" class="input-large" name="likedcolors" id="likedcolors">
        <input type="text" class="input-large" name="dislikedcolors" id="dislikedcolors">
      </div>
</div>

@Lykos，你的回答标签看起来像这样：

理想情况下，标签应如下所示：

Answer 1

如果您使用的是Bootstrap 3，请执行此操作：

<form>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
            <label class="control-label" for="likedcolors">Kleuren die u wel aanspreken*:</label>
            <input type="text" class="form-control" name="likedcolors" id="likedcolors"/>
        </div>
        <div class="col-md-6">
           <div class="form-group">
            <label class="control-label" for="dislikedcolors">Kleuren die u niet aanspreken*:</label>
            <input type="text" class="form-control" name="dislikedcolors" id="dislikedcolors"/>
        </div>
    </div>
</form>

如果您使用Bootstrap 2，请将类col-md-6替换为类span6。请记住，您的列应最终为12。

Answer 2

那样的东西？

<form>
    <div class="row">
        <div class="span6">
            <label class="control-label" for="likedcolors">Kleuren die u wel aanspreken*:</label>
            <div class="controls">
                <input type="text" class="input-large" name="likedcolors" id="likedcolors"/>
            </div>
        </div>
        <div class="span6">
            <label class="control-label" for="dislikedcolors">Kleuren die u niet aanspreken*:</label>
            <div class="controls">
                <input type="text" class="input-large" name="dislikedcolors" id="dislikedcolors"/>
            </div>
        </div>
    </div>
</form>

http://jsfiddle.net/hMga4/1/