Bootstrap单选按钮文本组

Question

我想将单选按钮和Bootstrap选择器分组，但它们不在同一行。

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

我还希望将两个文本框和标签组合在一起，以创建用户输入。

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

这是输出屏幕截图。

- user3744076

---

不清楚你想做什么。你的第二段代码说你想要将文本框连接起来，但是它们之间有一个单选按钮。你是想把所有这些放在一个输入组中还是只是内联？ - vanburen

与单选按钮一起的行内。 - user3744076

看起来你正在使用.input-group而不是.form-group来制作你的行内表单 ... 你是否首先尝试了这个HTML？http://getbootstrap.com/css/#forms-inline - blurfus

Answer 1

您可能需要稍微调整一下代码以适应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>

- blurfus

Answer 2

这是两种方法，你可以根据是否想要所有元素在一个 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>

- vanburen

Answer 3

你忘记了row div。每当你使用带有列的bootstrap布局时，你需要将列div嵌套在row 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文档以获取更多信息

- Roko

---

你试过原帖的HTML了吗？它跟你的回答完全不一样。 - blurfus