如何使用Bootstrap 4響應式制作小頁面？

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。 請遵循官方文檔中的“快速入門”頁面，該頁面已放置在項目的正確位置（ </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 個解決方案

解決方案1
1 2019-01-22 09:20:49

解決方案2
0 已采納 2019-01-22 09:23:46

解決方案3
0 2019-01-22 09:27:29

如何使用Bootstrap 4響應式制作小頁面？

問題描述

3 個解決方案

解決方案1 1 2019-01-22 09:20:49

解決方案2 0 已采納 2019-01-22 09:23:46

解決方案3 0 2019-01-22 09:27:29

解決方案1
1 2019-01-22 09:20:49

解決方案2
0 已采納 2019-01-22 09:23:46

解決方案3
0 2019-01-22 09:27:29