Question

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

Answer 1

通常，如果没有响应，则说明您尚未导入所需的JavaScript。遵循official documentation上的“快速入门”页面，并将其放置在项目的正确位置（</body>）。使用模板开始以更好地理解

由于我的代表，我无法发表评论，但是添加更多代码（例如您的</body>和<head>信息将使社区更加了解您的工作。

Answer 2

最好使用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>

Answer 3

我试图复制您上面提到的问题。我无法复制它。还要看看标签中包含的文件。请查看附加在Codepen上的该Codepen。 `

  </div>

  <div class="row h-100" id="main">
      <div class="col">
        <p>Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.</p>
      </div>
  </div>

  <div class="row align-items-end" id="footer">
      <div class="col">
        footer
      </div>
  </div>

`

如何使用Bootstrap 4响应式制作小页面？

3 个答案: