web-dev-qa-db-ja.com

Twitter Bootstrap 3インラインおよび水平形式

Bootstrap 2フォームをBootstrap 3.に移行しようとしています。
現在のコードとフィドル： http://jsfiddle.net/mavent/Z4TRx/

<div class="" id="myDialog1">

    <div class="" id="myDialog2">

        <form role="form" class="" id="contactForm" onsubmit="send(); return false;">
            <label>Please fill the form</label>
            <br/><br/>

            <div class="form-group">
                <label for="name">My Label 2</label>
                <input type="text" class="form-control" name="name" id="name" required="required" value="myName">
            </div>

            <div class="form-group">
                <label for="email">My Label 3</label>
                <input type="email" class="form-control" name="email" id="email" required="required">
            </div>

            <div class="form-group">
                <label for="message">My Label 4</label>
                <textarea class="form-control" name="message" id="message" required="required"></textarea>
            </div>

            <button type="submit" class="btn btn-primary" id="submit" style="margin-left: 40px">Send</button>
        </form>

    </div>


</div>

インライン動作が必要です。ラベル2はテキスト入力の隣になり、ラベル3はテキスト入力の隣になります。また、水平方向の動作も必要です。ラベル4はテキスト領域の上にあります。ラベル2とラベル3のテキストボックスは4列幅になり、ラベル4の幅はフォームの全幅になります。

enter image description here

Bootstrap 3でこれを行うにはどうすればよいですか？

htmlcsstwitter-bootstrap
17
trante

ドキュメントがフォームコントロールの使用を推奨しているからといって、そうする必要があるとは限りません。組み込みのグリッドシステムを使用して、レイアウトを実現できます。実際の例については、 http://bootply.com/829 を参照してください。以下のコード：

<div class="container">
  <form role="form">
    <div class="row">
      <label class="col-xs-4" for="inputEmail1">Email</label>
      <div class="col-xs-8">
        <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
      </div>
    </div>
    <div class="row">
      <label class="col-xs-4" for="inputPassword1">Password</label>
      <div class="col-xs-8">
        <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
      </div>
    </div>
    <div class="row">
      <label class="col-xs-12" for="TextArea">Text Area</label>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <textarea class="form-control" id="TextArea"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <button type="submit" class="btn btn-default">Sign in</button>
      </div>
    </div>
  </form>
</div>

Screenshot of above code rendered

更新：ラベルタグを削除したことに気付きました。答えを更新し、スワッピング<label> ために <div>。

更新：以下のコメントで要求されているように、コードを更新して、このレイアウトに狭い幅でとどまる必要性を反映します。実際の例については、 http://jsfiddle.net/8xxUV/ を参照してください。

42
Sean Ryan

私は同じ問題を抱えていました、ここに私の解決策があります：

<form method="post" class="col-md-12 form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="[email protected]"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

ここにデモ

2
Amir

探しているのは、実際にはインライン動作ではなく、水平方向だけです。

このコードは役立つはずです：

<div class="" id="myDialog1">
    <div class="" id="myDialog2">
        <form role="form" class="form-horizontal" id="contactForm" onsubmit="send(); return false;">
            <label>Please fill the form</label>
            <br><br>
            <div class="form-group">
                <label for="name" class="col-lg-3 col-sm-3">My Label 2</label>
                <div class="col-lg-7 col-sm-7">
                    <input type="text" class="form-control" name="name" id="name" required="required" value="myName">
                </div>
            </div>

            <div class="form-group">
                <label for="email" class="col-lg-3 col-sm-3">My Label 3</label>
                <div class="col-lg-7 col-sm-7">
                    <input type="email" class="form-control" name="email" id="email" required="required">
              </div>
            </div>

            <div class="form-group">
                <label for="message" class="col-lg-3">My Label 4</label>
                <div class="col-lg-10 col-sm-10">
                     <textarea class="form-control" name="message" id="message" required="required"></textarea>
                </div>
            </div>

            <button type="submit" class="btn btn-primary" id="submit" style="margin-left: 20px">Send</button>
        </form>
    </div>
</div>

そして、このようになります：

horizontal form

col-sm-*タグはオプションです-ウィンドウのサイズを小さくすると、要素のスタックが停止します。

こちらで試すことができます： http://bootply.com/82889

2
mccannf

以下のコードを試すことができます

<div class="" id="myDialog1">



        <form role="form" class="" id="contactForm" onsubmit="send(); return false;">
            <div class="clearfix igr col-md-12">
                <label>Please fill the form</label>
            </div>

            <div class="clearfix igr col-md-12">
                <div class="col-md-2">
                    <label for="name">My Label 2</label>
                </div>
                <div class="col-md-3">
                    <input type="text" class="form-control" name="name" id="name" required="required" value="myName">
                </div>
            </div>

            <div class="clearfix igr col-md-12">
                <div class="col-md-2">
                    <label for="email">My Label 3</label>
                </div>
                <div class="col-md-3">
                    <input type="email" class="form-control" name="email" id="email" required="required">
                </div>
            </div>

            <div class="clearfix igr col-md-12">
                <div class="col-md-12">
                    <label for="message">My Label 4</label>
                </div>
                <div class="col-md-3">
                    <textarea class="form-control" name="message" id="message" required="required"></textarea>
                </div>
            </div>
            <div class="clearfix igr col-md-12">
                <div class="col-md-2">
                    <button type="submit" class="btn btn-default btn-primary" id="submit" >Send</button>
                </div>
            </div>
        </form>
    </div>

そして、スタイルを次のように使用します。

label,textarea{
        margin:5px 0;
    }
    .igr{
        margin:15px 0;
    }
1
user2594152