我试图让下拉菜单显示在文字旁边"每按一次"。如何在不编辑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="$1000"></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>
答案 0 :(得分:11)
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="$1000">
</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>
您可以在此处查看其显示效果:http://www.bootply.com/WXOIcKQN6y
答案 1 :(得分:5)
只需将它放入新的col?
<div class="row">
<div class="col-sm-4 form-group">
<label class="control-label">Offer:</label>
<input type="text" class="form-control" placeholder="$1000">
</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>