我已经使用Bootstrap 4作为框架编写了一个小页面,但是它没有响应。
这是我的html:
<div class="container h-100 d-flex flex-column" id="container">
<div class="row align-items-start" id="header">
<div class="col">
header
</div>
</div>
<div class="row h-100" id="main">
<div class="col">
<p></p>
</div>
</div>
<div class="row align-items-end" id="footer">
<div class="col">
footer
</div>
</div>
</div>
这是我的CSS
html, body {
height: 100%;
}
#container {
background-color: rgb(255, 219, 164);
}
#header, #footer {
background-color: rgb(33, 202, 202);
}
当我在
<p>
元素内键入一个长段落时,这是一种不好的方法,我无法解决。如何使它具有全面的响应能力? 最佳答案
最好使用min-vh-100
而不是h-100
(或vh-100
),以便定义最小高度,并且如果内容很多,则可以滚动。
#container {
background-color: rgb(255, 219, 164);
}
#header,
#footer {
background-color: rgb(33, 202, 202);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container min-vh-100 d-flex flex-column" id="container">
<div class="row align-items-start" id="header">
<div class="col">
header
</div>
</div>
<div class="row flex-grow-1" id="main">
<div class="col">
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>
</div>
<div class="row align-items-end" id="footer">
<div class="col">
footer
</div>
</div>
</div>
关于html - 如何使用Bootstrap 4响应式制作小页面?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54304839/