內嵌水平表在引導

Question

的Airbnb網站上擁有一個整潔的形式有三種控制直列：

我試圖複製這一點，但我的形式似乎並沒有被塑造起來，儘管使用Bootstrap列。

我的代碼是

<div className="btn-group btn-group-justified" role="group" aria-label="..."> 
    <div className="col-md-3 col-xs-12 col-sm-12"> 
    <Geosuggest 
     fixtures={fixtures} 
     inputClassName="form-control" 
     onFocus={() => this.onFocus()} 
     onBlur={(value) => this.onBlur(value)} 
     onChange={(value) => this.onChange(value)} 
     onSuggestSelect={(suggest) => this.onSuggestSelect(suggest)} 
     location={new google.maps.LatLng(53.558572, 9.9278215)} 
     radius="20" 
    /> 
    </div> 
    <div className="col-md-3 col-xs-12 col-sm-12"> 
    <DateRangePicker 
     {...this.props} 
     onDatesChange={this.onDatesChange} 
     onFocusChange={this.onFocusChange} 
     startDatePlaceholderText='Llegada' 
     endDatePlaceholderText='Salida' 
     focusedInput={focusedInput} 
     startDate={startDate} 
     endDate={endDate} 
     minimumNights={0} 
     className="form-control" 
    /> 
    </div> 
    <div className="col-md-3 col-xs-12 col-sm-12"> 
    <select className="form-control" id="sel1"> 
     <option>1 persona</option> 
     <option>2 personas</option> 
    </select> 
    </div> 
    <div className="col-md-3 col-xs-12 col-sm-12"> 
    <button className="btn btn-default">Buscar</button> 
    </div> 
</div> 

Answer 1

你需要用你的元素在特定列，就像這樣：

<div class="container"> 
    <form class="form-horizontal"> 
     <div class="form-group"> 
      <div class="row"> 
       <label class="col-sm-4">Options</label> 
       <div class="col-sm-2"> 
        <input type="text" class="form-control" placeholder="Search" /> 
       </div> 
       <div class="col-sm-2"> 
        <select class="form-control"> 
         <option>Option 1</option> 
         <option>Option 2</option> 
        </select> 
       </div> 
       <div class="col-sm-2"> 
        <select class="form-control"> 
         <option>Option 1</option> 
         <option>Option 2</option> 
        </select> 
       </div> 
       <div class="col-sm-2"> 
        <input type="submit" class="btn" value="Submit" /> 
       </div> 
      </div> 
     </div> 
    </form> 
</div> 

現在，有在調整這些大小不同的視口沒有壞處，但它建議使用這種.horizontal-form來將自己的.form-control套在一個嵌套的div中，但使用label。

我還建議添加top: 6px左右的標籤。它使它在中心對齊。