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>