您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Bootstrap 4中心垂直和水平对齐

Bootstrap 4中心垂直和水平对齐

-

有 进行 。Bootstrap中已经包含的内容将起作用。确保表格的容器为 。Bootstrap4现在具有h-100100%高度的类…

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

(或相对于居中物品所需的高度)

注意:在任何元素上使用height:100%( )时,该元素 。在现代浏览器height:100vh;中,可以使用vh单位%来获得所需的高度。

因此,您可以设置html,正文{height:100%},或min-vh-100在容器上使用新类,而不是h-100

其他 2022/1/1 18:23:31 有527人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶