1

いくつかの「ラベル+テキストボックス」グループを水平方向と垂直方向に組み合わせて配置したいと思います。Bootstrapにはform-horizo​​ntalクラスがありますが、これによりラベルが上ではなく右側に配置されます。

私が達成したい取り決めは次のとおりです。

First Name        Last Name
[_______________] [______________]

Company Name
[________________________________]

つまり、最初の2つのフィールド（FirstNameとLastName）のテキストボックスは同じ行にありますが、そのラベルは左側ではなく上部にあり、3番目のフィールド（Company Name）も2行目に表示されます。ラベルを上にして。

これを達成するためのマークアップはどれですか？

4

2 に答える 2

2

次の方法で特定のフォームを作成できます。
ブートストラップフォームを使用したJsfiddle
ブラウザでライブ結果を参照してください。

結果のスクリーンショット

<form class="well span8">
  <div class="row">
    <div class="span3">
        <label>First Name</label>
        <input type="text" class="span3" placeholder="Your First Name">
        <label>Company</label>
        <input type="text" class="span3" placeholder="Company">
    </div>
    <div class="span5">
        <label>Last Name</label>
        <input type="text" class="span3" placeholder="Your Last Name">
    </div>
</div>

于 2013-02-20T03:47:18.860 に答える
-1

私の知る限り、テーブルを使用してそのように見せ、「名前」のテキストがボックスに残っていることを確認する必要があります。タグを使用し<br/>て行を区切ることができます。

<form class="form-inline">
<table>
    <tr>
        <td>
            <label for="fn">First Name</label>
            <br/>
            <input name="fn" type="text" class="input-small" />
        </td>
        <td>
            <label for="ln">Last Name</label>
            <br/>
            <input name="ln" type="text" class="input-small" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <label for="cn">Company Name</label><br/>
            <input type="text" class="input-large" />
        </td>
    </tr>
</table>
</form>
于 2013-02-20T00:08:29.877 に答える