求解，没有水平啊？
以气御码
2018-05-28 17:30
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>全局样式</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname" placeholder="请输入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
</body>
</html>
2回答
-
- qq_鱼_64
- 2018-06-08 11:11:45
由于form-control类里面定义的是 width:100%;display:block; 所以肯定是input占据一行的，你想要让标签和input放在一行里面，直接修改input的样式,width:200px;display:inline就可以了。当然你也可以直接用网格布局，用container容器包裹row，然后在row中包裹col就可以了
-
- 反叛者rebel
- 2018-05-28 23:18:12
col-sm-n 所在的父元素要有row类 然后要包裹在一个container中即祖父元素
玩转Bootstrap（基础）
314546 学习 · 2275 问题
相似问题