3

Bootstrap を使用して、「垂直スタイル」フォーム内に「水平スタイル」フィールドをいくつか配置したいと考えています。

どうすればそれを行うことができますか（可能であれば）？

4

3 に答える 3

4

Bootstrap の既存のクラス ( checkbox.inline) を活用して、探している効果を得ることができます。正しく見えるようにするための鍵はpadding-left: 0px;、ラベルに次のように指定することです。

  <div class="control-group">
    <div class="controls">
      <label class="checkbox inline" style="padding-left: 0px;" for="inputColor">Favorite Color <input type="text" id="inputColor" class="span2" /></label>
      <label class="checkbox inline" style="padding-left: 0px;" for="inputNColor">Next Color <input type="text" id="inputNColor" class="span2" /></label>
    </div>
  </div>

実際の例については、 http://jsfiddle.net/jhfrench/Hzucn/を参照してください。

私はあなたのために新しいクラスを作成しようとしました (の行に沿って.controls-row label.inline { padding-left: 0px;}、要素のスタイリングを行う必要はありませんが、予想よりも多くの競合が発生しました。したがって、このソリューションを広く使用する場合は、そのもつれを解くことに時間を投資したい...

于 2013-01-10T17:07:25.783 に答える
0

ブートストラップの .form-horizo​​ntal 実装と同様のフォーマットを使用できます。(水平フォームにスクロールします: http://twitter.github.com/bootstrap/base-css.html#forms )

ラベルとフォーム要素をグループ化 div でラップします (これは、ブートストラップの水平フォーム レイアウトで .control-group が行うことです)。

ラベルを左にフロートさせて、フィールドと水平方向に並べて表示します。

label.horizontal {
  float: left;
  width: 160px;
  padding-top: 5px;
  margin-right: 20px;
  text-align: right;
}

上記の例では、クラスが .horizo​​ntal のラベルは「水平にスタイル」され、残りは「垂直」またはデフォルトのフォーム レイアウトになります。

于 2013-01-08T23:12:14.160 に答える
0

ブートストラップですぐに使えるクラスがあります!

この例を確認してください：

<div class="span6">
  <form>
    <div class="controls controls-row">
      <input id="name" name="name" type="text" class="span3" placeholder="Name">
      <input id="email" name="email" type="email" class="span3" placeholder="Email address">
    </div>

   <div class="controls">
     <textarea id="message" name="message" class="span6" placeholder="Your Message" rows="5"></textarea>
   </div>

   <div class="controls">
     <button id="contact-submit" type="submit" class="btn btn-primary input-medium pull-right">Send</button>
   </div>

  </form>
</div>
于 2013-05-11T10:48:41.723 に答える