twitter-bootstrap 如何防止表单控件在 Bootstrap 中换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41226051/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I prevent a form-control from taking a new line in Bootstrap
提问by code511788465541441
I'm trying to get the dropdown menu to appear next to text "Pay every". How can I do this with bootstrap classes without editing the css or giving it a new custom class?
我试图让下拉菜单出现在文本“Pay every”旁边。如何在不编辑 css 或为其提供新的自定义类的情况下使用 bootstrap 类执行此操作？
<div class="form-group">
<label class="col-sm-2 control-label">Offer:</label>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="00"></div>
<div class="form-group">
<div class="i-checks col-sm-1">
<label class="control-label"> <input type="radio" value="option1" name="a" checked> All at once </label>
</div>
<div class="i-checks col-sm-2">
<label class="control-label"> <input type="radio" value="option1" name="a"> Pay every </label>
<select class="form-control" name="every" disabled >
<option>2 weeks</option>
<option>1 months</option>
<option>2 months</option>
<option>3 months</option>
<option>6 months</option>
</select>
</div>
</div>
</div>
采纳答案by Shadowfox
Simply put it in a new col?
简单地把它放在一个新的col？
<div class="row">
<div class="col-sm-4 form-group">
<label class="control-label">Offer:</label>
<input type="text" class="form-control" placeholder="00">
</div>
<div class="col-sm-4 form-group">
<div class="i-checks">
<label class="control-label">
<input type="radio" value="option1" name="a" checked> All at once </label>
</div>
</div>
<div class="col-sm-4 form-group">
<div class="i-checks">
<label class="control-label"> <input type="radio" value="option1" name="a"> Pay every </label>
<select class="form-control" name="every" disabled >
<option>2 weeks</option>
<option>1 months</option>
<option>2 months</option>
<option>3 months</option>
<option>6 months</option>
</select>
</div>
</div>
回答by Matt Dalzell
The form-inlineclass is the bootstrap class for creating forms with inline controls. Everything within each form-groupis displayed inline.
该form-inline班是创建具有内嵌的控制形式引导类。每个form-group内的所有内容都内联显示。
<div class="form-inline">
<div class="form-group">
<label class="control-label">Offer:</label>
<input type="text" class="form-control" placeholder="00">
</div>
<div class="form-group">
<div class="i-checks">
<label class="control-label">
<input type="radio" value="option1" name="a" checked> All at once </label>
</div>
</div>
<div class="form-group">
<div class="i-checks">
<label class="control-label"> <input type="radio" value="option1" name="a"> Pay every </label>
<select class="form-control" name="every" disabled >
<option>2 weeks</option>
<option>1 months</option>
<option>2 months</option>
<option>3 months</option>
<option>6 months</option>
</select>
</div>
</div>
</div>
You can see how it looks live here: http://www.bootply.com/WXOIcKQN6y
你可以在这里看到它的样子：http: //www.bootply.com/WXOIcKQN6y
