Question

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

我的样式表（我使用bootstrap为carousel提供的样式表和section的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

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

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

Bootstrap的.row旨在用于.container内部，它具有左右填充以补偿负边距。你有一个包含div，但它有一个id的“容器”，而不是class，所以Bootstrap没有造型。将.container类添加到其中：

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

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

#container {
    overflow: hidden;
}

从网站删除水平栏没有页脚

1 个答案: