如何使用Bootstrap 4响应式制作一个小页面? [英] How to make a small page using Bootstrap 4 responsive?

问题描述

我已经使用Bootstrap 4作为框架编写了一个小页面，但是它没有响应.

I've coded a small page using Bootstrap 4 as a framework, but it's not responsive.

这是我的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>元素内键入一个长段落时，这是一种不好的方法，我无法解决.如何使它具有全面的响应能力?

When I type a long paragraph inside the <p> element it goes it a bad way and I can't solve that. How can I make it full responsive?

推荐答案

最好使用min-vh-100而不是h-100(或vh-100)，以便定义最小高度，以防内容过多你会得到一个滚动.

Better use min-vh-100 instead of h-100 (or vh-100) so that you define a min-height and in case you have a lot of content you will get a scroll.

#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>

这篇关于如何使用Bootstrap 4响应式制作一个小页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！