引导单选按钮文本组答案

【问题标题】：bootstrap radio button text group引导单选按钮文本组
【发布时间】：2016-01-02 12:14:06
【问题描述】：

我想对单选按钮和引导选择进行分组，但它们不是内联的。

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

这是输出截图。

【问题讨论】：

不清楚您要做什么。您的第二段代码说您想加入文本框，但它们之间有一个单选按钮。您是想将所有这些都放在一个输入组中还是内联？
内嵌单选按钮。
您的内联表单似乎使用.input-group 而不是.form-group...您是否先尝试过这个HMTL？ getbootstrap.com/css/#forms-inline

标签： html twitter-bootstrap radio-button radio-group

【解决方案1】：

您可以通过以下两种方式执行此操作，具体取决于您是否希望将所有元素放在一个 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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您忘记了行 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了解更多信息

【讨论】：

你尝试过 OP 的 html 吗？它与您发布的答案相去甚远