5

Twitter Bootstrap を使用してフォーム フィールドを水平に配置する方法

以下のHTMLコードを試しました。しかし、それは以下のように1つずつ表示されます

  • 名- テキスト ボックス

  • 姓- テキスト ボックス

    探す

    <form class="form-horizontal">
    <div class="control-group">
      <label class="control-label" for="first">First Name</label>
      <div class="controls">
        <input type="text" id="first" placeholder="firstname">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="lastname">Last Name</label>
      <div class="controls">
        <input type="text" id="lastname" placeholder="Last Name">
      </div>
    </div>
    <div class="control-group">
      <div class="controls">              
        <button type="submit" class="btn">Search</button>
      </div>
    </div>
  </form>

姓と名を最初の行と次の行の検索ボタンに水平に配置する必要があります。

このような

  • 名- テキスト ボックス 姓- テキスト ボックス

    探す

4

3 に答える 3

8

inlineFirst name、Last name control-groupdivにクラスを追加します。

<div class="control-group inline">

CSS

.inline {
    display:inline-block;
}

ワーキングフィドルhttp://jsfiddle.net/GgSRN/

于 2013-04-08T10:27:30.250 に答える
7

これを試して

    <form class="form-group form-inline">
      <label class="control-label" for="first">First Name</label>
      <input type="text" id="first" placeholder="firstname">
      <label class="control-label" for="lastname">Last Name</label>
      <input type="text" id="lastname" placeholder="Last Name">

      <div>
        <button type="submit" class="btn">Search</button>
      </div>
    </form>

あなたが言ったように、ブートストラップインラインフォームを確認してください。

于 2013-04-08T10:29:21.023 に答える
0

別のファイルで CSS を使用して、html のスタイルを設定します。個人的には Bootstrap を使用してそれらをラップし、<div class="row">作成する「行」ごとにそれらの 1 つを使用します。

于 2013-04-08T10:25:31.647 に答える