css - TwitterBootstrapを使用してラベルとテキストボックスを同じ行に表示する方法

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」クラスまたはテーブルを使用したくありません。行と行流体クラスを試しましたが、機能しません。

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>

詳細については、ここをクリックしてください