How to make a small page using Bootstrap 4 responsive?

问题

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

Here is my 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>

And here is my css

html, body {
  height: 100%;
}

#container {
  background-color: rgb(255, 219, 164);
}

#header, #footer {
  background-color: rgb(33, 202, 202);
}

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?

回答1:

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>

回答2:

Normally, if it's not responsive you've not imported the required JavaScript. Follow the Quick Start page on the official documentation and that it has been put in the correct place of your project (the </body>). Use a template to start with for better understanting

I can't yet comment because of my rep but adding more code (such as your </body> and <head> information will give the the community more understanding on what you're doing.

回答3:

I tried to replicate the issue that you did mention above. I couldn't replicate it. Also take a look at the files included in tag. Please take a look at this codepen attached 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>

来源：https://stackoverflow.com/questions/54304839/how-to-make-a-small-page-using-bootstrap-4-responsive

标签

html

css

responsive-design

bootstrap-4