2016-12-19 4 views
2

"すべて支払う"というテキストの横にドロップダウンメニューを表示させようとしています。ブートストラップクラスでCSSを編集せずに、あるいは新しいカスタムクラスを与えることなく、これをどうやって行うことができますか?フォームコントロールがブートストラップで新しい行を取得するのを防ぐには

<div class="form-group"> 
    <label class="col-sm-2 control-label">Offer:</label> 
    <div class="col-sm-2"><input type="text" class="form-control" placeholder="$1000"></div> 
    <div class="form-group"> 
     <div class="i-checks col-sm-1"> 
      <label class="control-label"> <input type="radio" value="option1" name="a" checked> All at once </label> 
     </div> 

     <div class="i-checks col-sm-2"> 
      <label class="control-label"> <input type="radio" value="option1" name="a"> Pay every </label> 
      <select class="form-control" name="every" disabled > 
       <option>2 weeks</option> 
       <option>1 months</option> 
       <option>2 months</option> 
       <option>3 months</option> 
       <option>6 months</option> 
      </select> 
     </div> 

    </div> 
</div> 

enter image description here

+0

私はあなたのタイトルで少し混乱しています...あなたは、フォームコントロールをインラインあなたの写真のようになりたいですか?あるいは、新しい行に各コントロールを追加したいですか? –

+0

フォームをインラインで使うことができます:http://getbootstrap.com/css/#forms-inline |または、行を作成して各コントロールを別の列に配置することができます – yBrodsky

答えて

2

単に新しいCOLにそれを置きますか?

<div class="row"> 
<div class="col-sm-4 form-group"> 
    <label class="control-label">Offer:</label> 
    <input type="text" class="form-control" placeholder="$1000"> 
</div> 
<div class="col-sm-4 form-group"> 
    <div class="i-checks"> 
     <label class="control-label"> 
     <input type="radio" value="option1" name="a" checked> All at once </label> 
    </div> 
</div> 
<div class="col-sm-4 form-group"> 
    <div class="i-checks"> 
     <label class="control-label"> <input type="radio" value="option1" name="a"> Pay every </label> 
     <select class="form-control" name="every" disabled > 
      <option>2 weeks</option> 
      <option>1 months</option> 
      <option>2 months</option> 
      <option>3 months</option> 
      <option>6 months</option> 
     </select> 
    </div> 
</div> 

form-inline
+0

これは間違っています。フォームのインラインは正しいアプローチ、または複数の列を持つ行です。フォームグループのネストはドキュメント内にはありません。希望する動作を得るためのクラスが既に用意されているので、不要です。 – yBrodsky

+0

あなたはそうです、申し訳ありません、私はちょうど彼のコードをコピー/ペーストし、編集をしました。 – Shadowfox

+0

あなたは謝罪する必要はありません。 @IsThatQueebloの回答をアップアップしてください。 – yBrodsky

6

クラスは、インラインコントロールでフォームを作成するためのブートストラップ・クラスです。各form-group内のすべてがインラインで表示されます。

<div class="form-inline"> 
    <div class="form-group"> 
     <label class="control-label">Offer:</label> 
     <input type="text" class="form-control" placeholder="$1000"> 
    </div> 
    <div class="form-group"> 
     <div class="i-checks"> 
      <label class="control-label"> 
      <input type="radio" value="option1" name="a" checked> All at once </label> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="i-checks"> 
      <label class="control-label"> <input type="radio" value="option1" name="a"> Pay every </label> 
      <select class="form-control" name="every" disabled > 
       <option>2 weeks</option> 
       <option>1 months</option> 
       <option>2 months</option> 
       <option>3 months</option> 
       <option>6 months</option> 
      </select> 
     </div> 
    </div> 
</div> 

あなたはそれがここに住んでどのように見えるかを確認することができますhttp://www.bootply.com/WXOIcKQN6y

関連する問題