Question

我要在一页上创建两个表单。因此，我需要使用bootstrap4将页面水平分成两半。任何人都可以帮助我做到这一点

我已经尝试过了，但是没有用

page.html

<div class="container">
<div class="row">row1
</div>
<div class="row">row2
  </div>
</div>

page.css

.row{
    height:50%;
}

.container{
    height: 100%;
}

Answer 1

尝试此CSS

 html {
  height: 100%;
  width: 100%;
}

body {
  display: table;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

.row {
  display: table-row;
  height: 50%;
}

Answer 2

使用viewport height代替percentage

.row{
    height:50vh;
    background:#eee;
}

.container{
    height: 100vh ;
}

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
<div class="row">row1
</div>
<div class="row">row2
  </div>
</div>

如何使用引导程序将页面水平分成两个相等的部分

2 个答案: