bootstrap單選按鈕文本組

Question

我想將單選按鈕和引導選擇分組，但它們不是內聯的。

<div class="container"> 
      <form class="form-inline"> 
      <div class="input-group"> 
      <label class="radio-inline"> 
       <input name="radioGroup" id="radio1" value="option1" type="radio"><span class="input-group-addon"> Preset Size (<b>inch</b>): 
      </span></label> 
       <div class="col-md-6"> 
       <select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ..."> 
        <option>36」 x 84」</option> 
        <option>48」x84」</option> 
        <option>60」x84」</option> 
        <option>72x84」</option> 
        <option>48」x96」</option> 
       </select> 
       </div> 
      </div> <!-- Radio + Dropdown --> 
      </form> 
      </div> <!-- container --> 

我還想將2個文本框與標籤一起創建用戶輸入。

<div class="container"> 
      <form class="form-inline"> 
      <div class="input-group"> 
      <label class="radio-inline"> 
       <input name="radioGroup" id="radio2" value="option2" checked="" type="radio"> Custom Size: 
      </label> 
      <div class="col-sm-4"> 
       <input type="text" class="form-control" id="customSize1" placeholder=""> 
      </div> 
      <div class="col-sm-4"> 
       <label> x </label> 
      </div> 
      <div class="col-sm-4"> 
       <input type="text" class="form-control" id="customSize2" placeholder=""> 
      </div> 
      </div> 
      </form> 
      </div> 

下面是輸出截圖。

Answer 1

您忘記了行格。每當你使用引導佈局，你需要columns-嵌套列格一排DIV中：

<div class="row"> 
    <div class="col-sm-4"> first third</div> 
    <div class="col-sm-4"> second third</div> 
    <div class="col-sm-4"> third third</div> 
</div> 

閱讀bootstrap doc更多信息

Answer 2

您可能需要重新安排你的代碼有點適合bootstrap的使用。

首先，使用.form-group - 如果可能，也將元素放入行中。

東西線沿線的：

PS你可能需要調整這一點，但它應該給你一個良好的開端從

.form-inline input.form-control { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="container"> 
 
    <form class="form-inline"> 
 
    <div class="row"> 
 
     <div class="form-group col-xs-6"> 
 
     <label class="radio-inline col-xs-6"> 
 
      <input name="radioGroup" id="radio1" value="option1" type="radio" />Preset Size (<b>inch</b>): 
 
     </label> 
 
     <div class="col-xs-5"> 
 
      <select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ..."> 
 
      <option>36」x84」</option> 
 
      <option>48」x84」</option> 
 
      <option>60」x84」</option> 
 
      <option>72x84」</option> 
 
      <option>48」x96」</option> 
 
      </select> 
 
     </div> 
 

 
     </div> 
 
     <div class="form-group col-xs-6"> 
 
     <label class="radio-inline col-xs-5"> 
 
      <input name="radioGroup" id="radio2" value="option2" checked="" type="radio">Custom Size: 
 
     </label> 
 
     <div class="col-xs-3"> 
 
      <input type="text" class="form-control" id="customSize1" placeholder=""> 
 
     </div> 
 
     <div class="col-xs-1"> 
 
      <label>x</label> 
 
     </div> 
 
     <div class="col-xs-3"> 
 
      <input type="text" class="form-control" id="customSize2" placeholder=""> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </form> 
 
</div>

Answer 3

這裏有兩個你可以根據你是否需要一個row中的所有元素來做到這一點。它只是利用input-groups而不是其他。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<hr> 
 
<form> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <div class="form-group"> 
 
      <div class="input-group"> <span class="input-group-addon"> 
 
     <input type="radio" aria-label="..."> Preset Size (<b>inch</b>): 
 
     </span> 
 

 
      <select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ..."> 
 
       <option>36」 x 84」</option> 
 
       <option>48」x84」</option> 
 
       <option>60」x84」</option> 
 
       <option>72x84」</option> 
 
       <option>48」x96」</option> 
 
      </select> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-6"> 
 
     <div class="form-group"> 
 
      <div class="input-group"> <span class="input-group-addon"> 
 
     <input name="radioGroup" id="radio2" value="option2" checked="" type="radio"> Custom Size: 
 
     </span> 
 

 
      <input type="text" class="form-control" id="customSize1" placeholder=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
     <div class="form-group"> 
 
      <div class="input-group"> <span class="input-group-addon" id="sizing-addon2">X</span> 
 

 
      <input type="text" class="form-control" id="customSize2" placeholder=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form> 
 
<hr> 
 
<form> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-5"> 
 
     <div class="form-group"> 
 
      <div class="input-group"> <span class="input-group-addon"> 
 
     <input type="radio" aria-label="..."> Preset Size (<b>inch</b>): 
 
     </span> 
 

 
      <select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ..."> 
 
       <option>36」 x 84」</option> 
 
       <option>48」x84」</option> 
 
       <option>60」x84」</option> 
 
       <option>72x84」</option> 
 
       <option>48」x96」</option> 
 
      </select> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="form-group"> 
 
      <div class="input-group"> <span class="input-group-addon"> 
 
     <input name="radioGroup" id="radio2" value="option2" checked="" type="radio"> Custom Size: 
 
     </span> 
 

 
      <input type="text" class="form-control" id="customSize1" placeholder=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-3"> 
 
     <div class="form-group"> 
 
      <div class="input-group"> <span class="input-group-addon" id="sizing-addon2">X</span> 
 

 
      <input type="text" class="form-control" id="customSize2" placeholder=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form> 
 
<hr>