Bootstrap 3.0帶有驗證的內聯表格

Question

我試圖讓內聯表單工作，但似乎輸入的寬度不能拉伸到col-md-x的100％。不僅如此，圖形不起作用，因爲寬度不能達到100％。

下面是代碼：

<div class="form-inline" role="form"> 
     <div class="col-md-2 form-group"> 
      <label class="sr-only"></label> 
       <select class="form-control" id="add-assessment_questionType"> 
        <option value="slider">Slider</option> 
        <option value="radio">Radio Button</option> 
       </select> 
     </div> 
     <div class="col-md-5 form-group"> 
      <label class="sr-only"></label> 
      <textarea class="form-control add-assessment_newQuestion" rows="3" id="add-assessment_question" placeholder="Enter Question"></textarea> 
     </div> 
    <div id="add-assessment_title_color" class="col-md-5 form-group has-feedback"> 
     <label class="sr-only"></label> 
     <input type='text' class="form-control add-assessment_newQuestion" id="add-assessment_optionMaxValue" placeholder="Enter Max Value"></input> 
     <span id="add-assessment_optionMaxValue_icon" class="glyphicon glyphicon-remove form-control-feedback"></span> 
    </div> 

這裏是小提琴（查看它的最大寬度看到 「錯誤」）：
http://jsfiddle.net/DTcHh/

Answer 1

引導的.form-inline不真的打算用在裏面的列。按照documentation：

使用內嵌的形式，你必須設置一個寬度形式中使用 控制。

或者，您可以使用標準表單並將表單控件放入一行中。請參閱下面的代碼和這個例子bootply：http://www.bootply.com/MPWi0SUfY5

<div class="container"> 
    <form> 
    <div class="row"> 
     <div class="col-md-2"> 
     <div class="form-group"> 
      <label class="sr-only"></label> 
      <select class="form-control" id="add-assessment_questionType"> 
      <option value="slider">Slider</option> 
      <option value="radio">Radio Button</option> 
      </select> 
     </div> 
     </div> 
     <div class="col-md-5"> 
     <div class="form-group"> 
      <label class="sr-only"></label> 
      <textarea class="form-control add-assessment_newQuestion" rows="3" id="add-assessment_question" placeholder="Enter Question"></textarea> 
     </div> 
     </div> 
     <div class="col-md-5"> 
     <div id="add-assessment_title_color" class="form-group has-feedback"> 
      <label class="sr-only"></label> 
      <input type="text" class="form-control add-assessment_newQuestion" id="add-assessment_optionMaxValue" placeholder="Enter Max Value"> 
      <span id="add-assessment_optionMaxValue_icon" class="glyphicon glyphicon-remove form-control-feedback"></span> 
     </div> 
     </div> 
    </div> 
    </form> 
</div>