为了账号安全,请及时绑定邮箱和手机立即绑定

求解,没有水平啊?

https://img1.sycdn.imooc.com//5b0bcc3c0001856c13550271.jpg

<!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 回答

由于form-control类里面定义的是 width:100%;display:block; 所以肯定是input占据一行的,你想要让标签和input放在一行里面,直接修改input的样式,width:200px;display:inline就可以了。当然你也可以直接用网格布局,用container容器包裹row,然后在row中包裹col就可以了

0 回复 有任何疑惑可以回复我~

col-sm-n 所在的父元素要有row类 然后要包裹在一个container中即祖父元素

0 回复 有任何疑惑可以回复我~
#1

反叛者rebel

<div class="container"> <div class="row"> <div class="col-sm-2"> </div> </div> </div>
2018-05-28 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

求解,没有水平啊?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信