html - 从没有页脚的网站中删除单杠

Question

我正在使用 Bootstrap 框架来创建响应式网站。我意识到页面底部有一个水平条，我无法摆脱它。我在 stackoverflow 上查找了类似的答案，其中大多数都存在页脚问题。我检查了我的，我还没有设置页脚，而且我没有任何 100% 的宽度。我使用的 CSS 也没有修改引导元素的尺寸。我可以知道我的 HTML 代码有什么问题吗？

我的样式表(我正在使用 bootstrap 提供的样式表用于轮播和部分的 div id 来修改底部的内容:

CSS

.carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
    width: 70%;
    margin: auto;
}

#section {
  padding-left: 5%;
}

HTML

<div id="container">
  <!--Slideshow-->
  <div class="jumbotron" style="background:transparent !important;">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">

        <div class="item active">
          <img src="Images/Swimming.jpg" alt="1" style="width:460px; height:345px">
          <div class="carousel-caption">
            <h3>Swimming</h3>
            <p>Event of Swimming</p>
          </div>
        </div>

        <div class="item">
          <img src="Images/Basketball.jpg" alt="2" style="width:460px; height:345px">
          <div class="carousel-caption">
            <h3>Basketball</h3>
            <p>Event of Basketball</p>
          </div>
        </div>

        <div class="item">
          <img src="Images/Tennis.jpg" alt="3" style="width:460px; height:345px">
          <div class="carousel-caption">
            <h3>Tennis</h3>
            <p>Event of Tennis</p>
          </div>
        </div>

        <div class="item">
          <img src="Images/Football.jpg" alt="4" width="460" height="345">
          <div class="carousel-caption">
            <h3>Football</h3>
            <p>Event of Football</p>
          </div>
        </div>

        <div class="item">
          <img src="Images/Baseball.jpg" alt="5" width="460" height="345">
          <div class="carousel-caption">
            <h3>Baseball</h3>
            <p>Event of Baseball</p>
          </div>
        </div>
      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

  <br>


  <div class="row">
    <div class="col-sm-12 col-md-4" id="section">
      <h3>Registration for 2018</h3>
      <div id="registration" style="font-size: 20px;">
        <p>Click <a href="#">here</a> to Register
          <br /> Click <a href="#">here</a> to Register</p>
      </div>
    </div>
    <div class="col-sm-12 col-md-4" id="section">
      <h3>Announcements</h3>
      <p>s to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one
        of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
        et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
        section 1.10.32.
      </p>
    </div>
    <div class="col-sm-12 col-md-4" id="section">
      <h3>Facebook Feed</h3>
      <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English
        versions from the 1914 translation by H. Rackham.
      </p>
    </div>
  </div>
</div>

下图是我的网站带横条的图片:

希望我能知道这有什么问题。

Answer 1

不需要的水平滚动条的一个典型原因是在元素上设置负的左/右边距以将其拉到视口(viewport)的边缘。边距超出屏幕并强制滚动条。

Bootstrap 在 .row 的左侧和右侧应用 -15px 边距，这会导致您的情况出现水平滚动条。

Bootstrap 的 .row 设计用于 .container 内部，它具有左右填充以补偿负边距。您有一个包含的 div，但它有一个“容器”的 id，而不是一个 class，所以 Bootstrap 没有对它进行样式设置。添加 .container 类:

<div id="container" class="container">

如果您发现 .container 的填充不受欢迎，您可以使用自定义 CSS 规则隐藏它的溢出:

#container {
    overflow: hidden;
}