问答详情
源自：3-2 水平表单

为什么我的水平表单显示的不是水平的，input的宽度不是100%，说明不是基础表单了，就是不水平

<!doctype html>

<html>

<head>

    <meta 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 role="form">

  <div>

    <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>

    <div>

      <input type="email" id="inputEmail3" placeholder="请输入您的邮箱地址">

    </div>

  </div>

  <div>

    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>

    <div>

      <input type="password" id="inputPassword3" placeholder="请输入您的邮箱密码">

    </div>

  </div>

  <div>

    <div class="col-sm-offset-2 col-sm-10">

      <div>

        <label>

          <input type="checkbox"> 记住密码

        </label>

      </div>

    </div>

  </div>

  <div>

    <div class="col-sm-offset-2 col-sm-10">

      <button type="submit" class="btn btn-default">进入邮箱</button>

    </div>

  </div>

</form>

</body>

</html>


提问者：Richard_Li 2017-12-22 21:40

个回答

  • 精慕门9339400
    2018-06-02 11:48:37

    还要把Bootstrap4换成Bootstrap3

    0
  • 神华设计
    2017-12-25 17:38:54

    Bootstrap 提供了下列类型的表单布局：

    垂直表单（默认）      内联表单    水平表单

    要记得分组例如
     <div class="form-group">    <label for="name">名称</label>    <input type="text" class="form-control" id="name" placeholder="请输入名称">  </div>
    详细的可以参考

    http://www.runoob.com/bootstrap/bootstrap-forms.html


    0