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

您可能需要重新安排一些代码以适应引导程序的使用。

首先，使用.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 2

你忘记了行div。无论何时使用带有列的引导布局，都需要将列div嵌套在行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 3

这有两种方法可以执行此操作，具体取决于您是否需要一个row中的所有元素。它只使用input-groups而不是其他。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;