Question

Steps to Replicate
1. Expand browser window to full screen (performed on a notebook).
2. Keep resizing window.

Expected Behavior:
Resizing browser window resizes the DIV elements.

Actual Behavior:
DIV elements do not appear to be fully resizing as shown by the background color being displayed (orange).

References:
Screenshot
JSFiddle

External Resources:
bootstrap.min.js
bootstrap.min.css
bootstrap-theme.min.css
jquery-2.2.4.min.js

HTML

<body>

  <div class="container-fluid" id="top">

    <div class="row">
      <div class="col-md-12" id="intro-row">
        <h2 id="intro-content">Lorem ipsum Dolore sunt cillum laboris in veniam.</h2>
      </div>
    </div>

    <div class="footer-row">
      <a href="#top">Lorem ipsum Laboris ex Duis cillum incididunt aliqua.</a>
    </div>

  </div>

</body>

CSS

body {
    font-family: 'Roboto Mono', sans-serif;
    color: black;
    font-weight: 300;
    width: 100%;
    height: auto;
    background-color: orange;
}

#header-row {
    background-color: green;
}
.header-content {
    margin: 30px 30px 30px 15px;
    font-size: 2em;
}

#intro-row {
    background-color: blue;
}
#intro-content {
    margin: 100px 150px 100px 150px;
    font-size: 12em;
    text-align: left;
}

.footer-row {
    font-size: 18px;
    text-align: center;
    background-color: orange;
    color: white;
}

Answer 1

Give your #intro-row following css:

#intro-row {
    background-color: blue;
    float: left;
    width: 100%;
}

It seems bootstrap is removing the float left attribute which makes it work if the viewport is more than 992px.

EDIT

Alternatively you can give your intro-row ID following bootstrap classes in your HTML:

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="intro-row">

Answer 2

Another way to fix this is to change the margins in your #intro-content and instead use padding for the top and bottom of the text.

#intro-content {
    margin: 0 150px 0 150px;
    padding: 20px 0 20px 0;
    font-size: 3em;
    text-align: left;
}

jsFiddle

EDIT: Fiddle

Answer 3

The simplest way:

/* Remove this: */
#intro-row {
    background-color: blue;
}

/* Add this: */
#top > .row {
    background-color: blue;
}

Unexpected behavior with boostrap when resizing viewport

3 个答案:

EDIT