css - 视口(viewport)大于中等时出现奇怪的垂直溢出

Question

我正在使用 bootstrap-sass在垂直堆栈中布置一些 div 元素。但是，当视口(viewport)高于 md 大小时 div 元素溢出并产生垂直滚动条时，我遇到了问题。

演示 https://nyc3.digitaloceanspaces.com/bingo-assets/index.html

这是我的 grid.scss 文件:

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins";
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid";
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";

.row {
  @include make-row();
}

#content {
  @include container-fixed;
}

#promo-header {
  @include make-sm-column(12);
}

#subscribe {
  @include make-sm-column(12);
}

#video {
  @include make-sm-column(12);
}

#factoid {
  @include make-sm-column(12);
}

下面是 HTML:

<div id="content">
  <div class="row">
    <div id="promo-header">
        <img width="100%" src="/images/promo.jpg">
    </div>

    <div id="subscribe">
      <h2>Simply enter your details for a chance to win!</h2>
      <form name="subscribe">
        <div>
          <label>Firstname</label>
          <input type="text" name="firstname" />
        </div>

        <div>
          <label>Surname</label>
          <input type="text" name="surname" />
        </div>

        <div>
          <label>Email</label>
          <input type="text" name="email" />
        </div>

        <div>
          <label>Telephone</label>
          <input type="text" name="telephone" />
        </div>

        <div>
          <label>Postcode</label>
          <input type="text" name="postcode" />
        </div>

        <div>
          <label>Have you seen this product on TV?</label>
          <select name="question">
            <option value>Please Select</option>
            <option value="Y">Yes</option>
            <option value="N">No</option>
          </select>
        </div>

        <button class="btn">Get Your Coupon</button>
        <small>Please note: Only one coupon available per person and only one email address allowed per person. Coupon valid 02.10.17 - 31.03.18. Redeemable by UK residents 18+ only in participating stores only.</small>
      </form>
    </div>

    <div id="video">
      <div id="video-container">
        <iframe src="https://www.youtube.com/embed/ZZa7Kgo0apA" frameborder="0" allowfullscreen></iframe>
      </div>
      <div id="description">
        <h2>Video Title</h2>
        <p>Do you want to cook amazing meals?</p>
      </div>
    </div>

    <div id="factoid">
      <h2>Celebrity dietician Lucy Jones and Princes are working together to show families how they can eat well with canned fish.</h2>
      <p>Did you know our fillers are:</p>
      <ul>
        <li>High in protein</li>
        <li>Low in saturated fat</li>
        <li>A quick and easy lunch</li>
      </ul>
      <a href="#" class="btn">Learn More</a>
    </div>
  </div>
</div>

我在每个 div 周围放置了一个红色边框。这是它在小型或中型视口(viewport)中的样子:

Answer 1

解决方案是替换:

@include container-fixed;

与

@extend .container;

container-fixed 似乎是一个流体容器，从 fluid-container 声明中可以看出:

.container-fluid {
  @include container-fixed;
}