Bootstrap 内联显示表单标签

Question

我希望在 Twitter Bootstrap 中内嵌显示 2 个表单标签。

由于它们的 input-large 类，表单输入可以很好地内联显示。如何在我的标签上实现相同的行为？我希望标签以内联方式显示在其相应的输入字段之上。

这是我的 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

类似的东西？

<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/

Answer 2

如果您使用的是 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 个结尾。