web-dev-qa-db-ja.com

Bootstrap 3.0：テキストと入力を同じ行に配置する方法

私は現在自分のウェブサイトをBootstrap 3.0に切り替えています。フォーム入力とテキストフォーマットに問題があります。ブートストラップ2で機能したものは、ブートストラップ3では機能しません。

フォーム入力の前後に同じ行にテキストを表示する方法を教えてください。私は例のBootstrap 3バージョンの 'form-control'クラスの問題にそれを狭めました。

1行にすべてのテキストと入力を取り込むにはどうすればよいでしょうか。ブートストラップ3の例をjsfiddleのブートストラップ2の例のようにします。

JSフィドルの例

<div class="container ">
  <form>
      <h3> Format used to look like this in Bootstrap 2 </h3>
      <div class="row ">
          <label for="return1"><b>Return:</b></label>
          <input id="return1" name='return1' class=" input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return1' style='color:blue'> +/- 14 Days</span>
      </div>

       <br>   
       <br>   
           <h3> BootStrap 3 Version </h3>

      <div class="row">
          <label for="return2"><b>Return:</b></label>
          <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return2' style='color:blue'> +/- 14 Days</span>
      </div>
  </form>

更新日：私はこれを動作するようにコードを変更しますが、現在整列に問題があります。何か案は？

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>
htmlhtml5formattingtwitter-bootstrap-3
84
fat fantasma

インラインにしたい各要素を、行内の別々のcol-md- * divに入れます。または要素をインラインで表示するように強制します。フォームコントロールクラスはブロックを表示します。これは、ブートストラップがそれを行うべきだと考える方法だからです。

36
lomteslie

ドキュメントから直接 http://getbootstrap.com/css/#forms-horizo​​ntal 。

Bootstrapの事前定義されたグリッドクラスを使用して、フォームに.form-horizontalを追加して、ラベルとフォームコントロールのグループを水平方向に配置します（<form>である必要はありません）。そうすることで.form-groupsがグリッド行として振る舞うように変更されるので、.rowは必要ありません。

サンプル：

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>
131
Denis Besic

必要なのは.form-inlineクラスです。ただし、新しい.form.inlineクラスを使用して各コントロールの幅を指定する必要があります。

ご覧ください これで

21
Reza Shirazian

これらのどれも私にとってはうまくいきませんでした。.form-control-staticクラスを使わなければなりませんでした。

http://getbootstrap.com/css/#forms-controls-static

13
hakunin

あなたはこれのようにそれをすることができます：

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="input" placeholder="Input text">
        </div>
    </div>
</form>

フィドル

10
Paulo Fidalgo

私がそれを解決した方法は、そのように私のサイトのメインcssで私のすべてのテキストボックスのために単に上書きを追加することでした：

.form-control {
    display:initial !important;
}
3
Hugo Nava Kopp

divの母親に "class =" col-lg-12 ""を渡すだけです。

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

そうなる

<div class="form-group">
<div class="col-lg-12">
  <div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
</div>
</div>
3
welboy

私達が使用しなければならないのですべて更新されたコードをチェックしてください

 form-control-static not only form-control

http://jsfiddle.net/tusharD/58LCQ/34/

よろしくお願いします

1
Tushar Dhingra