ブートストラップの入力フィールドをカスタマイズする

Question

2つの入力フィールドを、より大きい画面でより短い幅にすると、どのように近くに配置できますか？問題は、入力フィールドを短い幅の1行にすることです。私は最終的にそれを達成するが、短い画面では、1行に入るのに十分なスペースがあっても積み重ねる。ここにはdemoがあります。

私が持っているもの：ビューフィールドに幅が収まるかぎり入力フィールドを1行にしてください。そうでない場合は、入力フィールドを全幅に積み重ねてください。

注：私はちょうどブートストラップを学習し始めており、すべてのクラスに精通していません。

HTML

<div class="site-wrapper"> 
    <div class="jumbotron"> 
     <h1>Header</h1> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="input-group-lg"> 
         <input id="user" class="form-control form-inline" placeholder="Your name" type="text"> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <div class="input-group-lg"> 
         <select id="boardSize" class="form-control form-inline" title="Select Size"> 
          <option>1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
         </select> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

あなたがcol-xs-*を使用する必要がありスタッキング防止するためにCSS

body { 
    background-color: #fff; 
    color: #ffffff; 
    text-align: center; 
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); 
    margin: 0; 
} 
html, body { 
    height: 100%; 
    background-color: #333; 
} 
.site-wrapper { 
    width: 100%; 
    height: 100%; 
    min-height: 100%; 
    -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); 
    box-shadow: inset 0 0 100px rgba(0,0,0,.5); 
} 
.jumbotron { 
    background-color: #ccbb99 !important; 
    /*background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));*/ 
    height: 100%; 
    margin-bottom: 0; 
} 
.jumbotron h1 { 
    font-family: chalkitup, "sans-serif"; 
    color: #69350F !important; 
} 
#user, #boardSize { 
    max-width: 280px; 
} 

Answer 1

。 pull-rightとpull-leftを組み合わせると、グリッドに入力する場所を選択できます。 form-inlineクラス

<form class="form-inline"> 
    <div class="col-xs-6"> 
     <div class="form-group pull-right"> 
       <div class="input-group-lg "> 
        <input id="user" type="text" class="form-control form-inline" placeholder="Your name"> 
       </div> 
     </div> 
     </div> 
    <div class="col-xs-6"> 
     <div class="form-group pull-left"> 
       <div class="input-group-lg "> 
        <select id="boardSize" class="form-control form-inline" title="Select Size"> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
         <option>4</option> 
        </select> 
       </div> 
     </div> 
    </div> 
    </form> 

DEMO