引导单选按钮文本组
Posted
技术标签:
【中文标题】引导单选按钮文本组【英文标题】：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
【参考方案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 吗？它与您发布的答案相去甚远以上是关于引导单选按钮文本组的主要内容，如果未能解决你的问题，请参考以下文章