如何利用类似cols-xs-4的方式减少宽度并且独占一行？
superhuman进化中
2016-11-16 17:56
这里的代码好像都是很宽，那么我就想用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>
3回答
-
- 胖官与他的面包
- 2017-09-12 20:48:41
其实还可以写空的div 设置col的值，就是在你前面的div col-md-4的后面补齐一个空的div 设置col-md-8，这样也会显示独占一行但是 不能居中显示 offset这个设置一下应该也是可以的
-
- 慕粉13574479962
- 2016-11-18 08:55:54
<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>我只是做个例子 你具体想要怎样的还是要自己调 多动手 我也还在学习当中
-
- qq_杂念_04076126
- 2016-11-17 19:59:45
多加几个就换行了。。
玩转Bootstrap（基础）
314531 学习 · 2275 问题
相似问题