Bootstrap 3.0：テキストと入力を同じ行にするにはどうすればよいですか？

89

現在、ウェブサイトをBootstrap 3.0に切り替えています。フォームの入力とテキストのフォーマットに問題があります。Bootstrap 2で機能したものはBootstrap 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>

html  formatting  twitter-bootstrap-3 
— 太った空想
ソース
どちらも同じform-controlで、ブートストラップ3の例に追加のクラスがあるだけです。
— カイルニーダム2013
1
ブートストラップドキュメントの例をご覧ください。ラベルgetbootstrap.com/css/#forms-horizo​​ntalの
— バンパーボックス
申し訳ありませんが、まだ混乱しています。下の例（BS3）には、見栄えのよい 'form-control'クラスがあります。私は見栄えを良くし、テキストと入力を同じ行に保ちたいです。何が欠けていますか？
— 太った空想2013
別の方法で質問します。テキストと入力フィールドを同じ行に配置し、適切な列に配置するにはどうすればよいですか？このフィドルjsfiddle.net/fatfantasma/QwkpEを参照してください 。もちろん、同じ行の右端にテキストを追加したいと思います。どうすればいいですか？
— 太った空想
.input-lg入力フィールドの高さを増やしますが、ラベルの高さとサイズを調整するクラスも必要です。
— Petrus Theron 2013

回答:

39

インラインにする各要素を、行内の個別のcol-md- * div内に配置します。または、要素を強制的にインラインで表示します。ブートストラップが行うべきであると考える方法なので、フォームコントロールクラスはブロックを表示します。

— ロムテスリー
ソース
136

ドキュメントから直接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>
— デニス・ベシック
ソース
15
+1。それは公式ドキュメントのリンクから、これは、受け入れ答えなければなりません
— EProgrammerNotFound
これはリンクのみの回答であり、参照されたページが変更または削除された場合に備えて、例がなければ承認されるべきではありません。
— NDM
なぜ正しい答えは正しい答えですか？これが正解です！@fat fantasma
— JMASTER B 2015
これらをform-control-staticでラップする必要があります。以下の回答を参照してください
— rmcsharry
2
*モバイル用途のCOL-XS- *ではなくCOL-SM-にも仕事にいることを得るために-応答レイアウトに仕様です@Whitecat
— niico
23

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

これを見てください

— レザシラジアン
ソース
これは、ブロックのform-horizontalクラスform-groupショーでdivを強制しなかったため、クラスよりも良い答えになるはずです。
— shawmzhu
これは、幅が768px以上のビューポート内のフォームにのみ適用されます。
— rmcsharry
13

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

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

— はくにん
ソース
1
これは本当に役に立ちました。これがないと、ラベルテキストと入力テキストは、col-と整合していなかった-
— ブレンダン・コーディ・ケニーは、
これは正解です。特に、フォームを小さいデバイスで正しくラップしたい場合
— rmcsharry
うん、これは私にとってもうまくいく。col-xs- *カラムでは他のソリューションは失敗します。BS 3.3.7では 'form-control-static text-right'を使用するとうまくいきました。
— ニュートリノ2017年
10

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

<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>

フィドル

— パウロフィダルゴ
ソース
4

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

私がそれを解決した方法は、私のサイトのメインcssにあるすべてのテキストボックスにオーバーライドを追加することでした。

.form-control {
    display:initial !important;
}
— ヒューゴナバコップ
ソース
1
これは何をしますか？
— AgilePro
0

Bootstrap 4 for Horizo​​ntal要素では.row、.col-*-*クラスで使用してラベルとコントロールの幅を指定できます。このリンクを参照してください。

一連のラベル、フォームコントロール、およびボタンを単一の水平行に表示する場合は、.form-inlineこのリンクを使用して詳細を確認できます

— リアム
ソース
問題は、特にブートストラップ3を述べている
— blupointmedia
1
ブートストラップ4にも同じ問題があり、他の人を助けるために投稿しました
— Liam
-2

またはこれを行うことができます：

<table>
  <tr>
    <td><b>Return:</b></td>
    <td><input id="return1" name='return1' 
              class=" input input-sm" style="width:150px"
              type="text" value='8/28/2013'></td>
  </tr>
</table>

上記の提案をすべて試しましたが、どれもうまくいきませんでした。12列グリッドで固定数の列を選択したくありません。プロンプトとその直後の入力が必要です。また、必要に応じて列を拡大します。

はい、私は知っています、それはブートストラップがすべてについて何であるかに対して反対です。また、テーブルは絶対に使用しないでください。DIVはテーブルよりもはるかに優れているからです。しかし問題は、テーブル、行、セルが実際に機能することです。

はい-私は本当にCSS狂信者がいることを知っています。そして、ひどい反応は決して決してTABLE、TR、およびTDを決して使用しません。はい、DIV class = "row"およびDIV class = "cell"を指定したDIV class = "table"の方がはるかに優れていることは知っています。動作しない場合を除いて、多くの場合があります。私は人々が盲目的にそれらの状況を無視すべきだとは思いません。TABLE / TR / TDが適切に機能する場合があります。よりエレガントであると考えられているからといって、より複雑で壊れやすいアプローチを使用する理由はありません。開発者は、さまざまなアプローチの利点とトレードオフを理解する必要があり、DIVの方が優れているという絶対的な規則はありません。

「適切なケース-このディスカッションに基づいて、いくつかの既存のTDSとTRSをDIVに変換しました。45分間いじって、すべてが互いに並ぶようにしようとしましたが、あきらめました。TDは10秒後に戻ってきます-機能します-すぐに-すべてのブラウザで、これ以上何もする必要はありません。私に理解させてください-他の方法で私にそれを実行させたい理由は何ですか？」[ https://stackoverflow.com/a/4278073/1758051]を参照してください

この： "

レイアウトは簡単です。CSSでヘッダーとフッターを使用して動的な3列のレイアウトを実現する方法について書かれた記事があるという事実は、それが貧弱なレイアウトシステムであることを示しています。もちろん、それを機能させることはできますが、その方法については、文字通り何百ものオンライン記事があります。それが明らかに明白であるので、テーブルのある同じようなレイアウトのためのそのような記事はほとんどありません。テーブルに対して何を言っても、CSSを支持して、この1つの事実はすべてを取り消します。CSSの基本的な3列のレイアウトは「The Holy Grail」と呼ばれることがよくあります。[ https://stackoverflow.com/a/4964107/ 1758051]

すべての状況でDIVを常に列に整列させる方法をまだ見ていません。私は実際には問題にぶつからない些細な例を示し続けます。「レスポンシブ」とは、常に列に並ばない方法を提供することです。ただし、本当に列が必要な場合は、DIVを機能させるために何時間も費やすことができます。時には、狂信者が何を言っていても、適切なテクノロジーを使用する必要があります。

— AgilePro
ソース
2
テーブルは応答しません。
— ペドロモレイラ
テーブルはそれ自体を非テーブルに再フォーマットしないことは誰でも知っています。しかし、必要なものが行である場合は、常に行のままです。DIVタグではこれを強制することはできません。人々は常に応答性を求めているように振る舞いますが、あなたがそれを実行していることは、「ほとんどの場合」と「常時」を混同しています。これを書いている時点では、この回答には2つの反対票があります。ここでの私の意見に同意する場合は、TRが必要な場合があることを他のユーザーにも知らせてください。
— AgilePro 2017年
あなたはあなた自身の意見に対して権利を持っていますが、私は一般的なコンセンサスは、表形式のデータを表示する他のものにはテーブルを使用してはならないということだと思います。テーブルは、何ができるか、どの程度カスタマイズできるかが制限されすぎています。それでもdivに
— Pedro Moreira
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.