【问题标题】：Bootstrap form label not appearing in correctlly引导表单标签未正确显示
【发布时间】：2017-01-28 07:15:21
【问题描述】：
我有一个带有内联单选按钮的表单组。问题是在较大的屏幕上，下一个文本输入标签出现在右侧的正下方，而不是左侧的新行上。
我尝试添加换行符，但没有帮助
代码：
<div class="container">
<form role="form">
<div class="form-group">
<div class="col-xs-6">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
<div class="col-xs-6">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</div>
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</div>
</div>
</div>
<br />
<div class="form-group">
<div class="col-sm-12">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
<br/>
<button type="submit">Submit</button>
</form>
</div>
JSFiddle Demo
【问题讨论】：
标签：
html
forms
twitter-bootstrap
css
【解决方案1】：
您可以将每个表单行包装成行
<div class="container">
<form role="form">
<div class="row">
<div class="form-group">
<div class="col-xs-6">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
<div class="col-xs-6">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</div>
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
</div>
<button type="submit">Submit</button>
</form>
</div>
https://jsfiddle.net/n70kLfnc/
【解决方案2】：
将 class="form-group" 的 div 改为 "row form-group"
【解决方案3】：
你可以试试这个 CSS
.form-group .label { display: block }
但最好的方法是始终将 col-* 封装在一行 div 中。
这是你重写的代码：
<div class="container">
<form role="form">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
</div>
<div class="col-xs-6">
<label for="optionsRadios">Preferred Contact Method</label>
<div>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
</div>
<button type="submit">Submit</button>
</form>
</div>
这是我给你的 jsfiddle 的草稿：https://jsfiddle.net/ag9aqjrz/4/
【解决方案4】：
试试这个
将<br> 替换为<div class="clearfix"></div>
不使用<br> 和clearfix 你可以试试这种格式
<div class="container">
<div class="row">
<form role="form">
<div class="col-xs-6">
<div class="form-group">
<label for="phone">Phone Number:</label>
<input class="form-control" id="phone" placeholder="Enter Phone Number" type="text">
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="optionsRadios">Preferred Contact Method</label>
<br>
<div class="radio-inline">
<label for="optionsRadios1">
<input name="optionsRadios" id="optionsRadios1" value="option1" checked="" type="radio">Email</label>
</div>
<div class="radio-inline">
<label for="optionsRadios2">
<input name="optionsRadios" id="optionsRadios2" value="option2" type="radio">Phone</label>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label for="website">Another Text Input:</label>
<input class="form-control" id="website" placeholder="Testing" type="url">
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
【解决方案5】：
<div class="container">
<form role="form">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</div>
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
<div class="col-xs-12">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
【解决方案6】：
从
颠倒顺序
<div class="form-group">
<div class="col-sm-12">
到
<div class="col-sm-12">
<div class="form-group">
【讨论】：
-
-
请在您使用 class="col-xs-6" 的 div 之外的 中使用 class="row"
【解决方案7】：
而不是用于电话号码以及首选联系方式
电话号码：
<div class="col-sm-6">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
【解决方案8】：
好吧，问题出在列结构上，因为您将“col-sm-x”与“col-xs-x”混合使用，您应该使用其中一个或两个，所以正确的xs版本如下
<div class="container">
<form role="form" class="form-horizontal">
<div class="form-group">
<div class="col-xs-6">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
<div class="col-xs-6">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</div>
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</div>
</div>
</div>
<br />
<div class="form-group">
<div class="col-xs-12">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
<br />
<button type="submit">Submit</button>
</form>
</div>