Как сделать небольшую страницу с помощью Bootstrap 4 адаптивной? - PullRequest
Новая
       7

Как сделать небольшую страницу с помощью Bootstrap 4 адаптивной?

0 голосов
/ 22 января 2019

Я написал небольшую страницу, используя 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>, это плохо, и я не могу решить это. Как я могу сделать его полностью отзывчивым?

Ответы [ 3 ]

0 голосов
/ 22 января 2019

Лучше использовать 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>
0 голосов
/ 22 января 2019

Я попытался повторить проблему, о которой вы упоминали выше.Я не мог повторить это.Также взгляните на файлы, включенные в тег.Пожалуйста, посмотрите на этот кодовый блок прилагается 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>

`

0 голосов
/ 22 января 2019

Обычно, если он не отвечает, вы не импортировали необходимый JavaScript.Перейдите на страницу быстрого запуска официальной документации и убедитесь, что она была помещена в правильное место вашего проекта (</body>).Используйте шаблон для начала, чтобы лучше понять:

Я пока не могу комментировать из-за своего представителя, но добавляю больше кода (например, информацию о </body> и <head>, что даст сообществу больше понимания того, чтоты делаешь.

...