3

ユーザーが名前とメールアドレスを入力する必要があるフォームを作成しています。フォームの1行目には、名前の各部分に2つの入力が並んでおり、2行目には、最初の行を合わせた幅と同じ幅の電子メールアドレスの入力が1つあります。流体グリッドシステムを使用しようとしていますが、2行目と1行目を揃えることができません。

<form action="/subscriptions" method="post">
  <fieldset>
    <div class="control-group">
       <label class="control-label" for="name">Name</label>
       <div class="controls row-fluid">
          <input class="span2" id="first_name" name="first_name" placeholder="First" required="required" type="text">
          <input class="span2" id="last_name" name="last_name" placeholder="Last" required="required" type="text">
       </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="email">Email</label>
      <div class="controls row-fluid">
      <input class="span4" id="email" name="email" type="email">
    </div>
   </div>
 </fieldset>
</form>​

http://jsfiddle.net/sguha095/v4amX/

4

2 に答える 2

10

このjdfiddleを見てください：http：//jsfiddle.net/kY5LL/18/

div.row-fluidフォームの行ごとにいくつかのコンテナーを追加し、デモンストレーション用に1セットの入力を追加しました。

これがあなたが探していたものであることを願っています。

于 2012-10-13T08:58:29.990 に答える
2

まず、HTMLを少しクリーンアップする必要があります。最初の行には、余分な終了divがあります。

スタイリングを改善するためにいくつかのクラスを追加したので、それがどのように機能するかを確認できます。この input-block-levelクラスは、入力を真のブロックレベルの要素のように動作させるためのブートストラップミックスインです。これをクリーンにし、CSSの利点を活用したい場合に必要です。すべてのスタイリングをHTMLで実行したい場合は、より多くのマークアップとより少ないセマンティックメソッドを使用して実行できますが、これはお勧めしません。

お役に立てれば！

http://jsfiddle.net/kY5LL/12/

于 2012-10-12T05:21:29.240 に答える