这里的代码好像都是很宽,那么我就想用cols-xs-x的方式来修改它们的宽度,结果发现它们并排显示了,如何让他们独占一行显示?加BR不行
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>表单控件状态——焦点状态</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>示例1</h1>
<form role="form">
<div class="form-group has-success has-feedback" style="width:25%;">
<label for="success">成功状态</label>
<input type="text" id="success" placeholder="成功状态">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group col-xs-4 has-warning has-feedback">
<label for="warning">警告状态</label>
<input type="text" id="warning" placeholder="警告状态">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label for="error">错误状态</label>
<input type="text" id="error" placeholder="错误状态">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
</body>
</html>
其实还可以写空的div 设置col的值,就是在你前面的div col-md-4的后面补齐一个空的div 设置col-md-8,这样也会显示独占一行但是 不能居中显示 offset这个设置一下应该也是可以的
<div class="form-group col-xs-4 has-warning has-feedback">
<label for="warning">警告状态</label>
<input type="text" id="warning" placeholder="警告状态">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
这个代码的的 col-xs-4不应该和form-group放在一起 应该单独起一块:类似于下面这样
<div class="form-group has-warning has-feedback">
<label for="warning">警告状态</label>
<div class="col-md-6">
<input type="text" id="warning" placeholder="警告状态">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
</div>
我只是做个例子 你具体想要怎样的还是要自己调 多动手 我也还在学习当中
多加几个就换行了。。