Bootstrap HTML页面向左延伸超出屏幕[重复]答案

【问题标题】：Bootstrap HTML page extends leftward beyond screen [duplicate]Bootstrap HTML页面向左延伸超出屏幕[重复]
【发布时间】：2017-05-25 12:49:58
【问题描述】：

我正在使用 Bootstrap 构建个人网站，但遇到了一个我找不到解决方案的问题。我查看了各种教程，并且只有一个简单网页的基本骨架。但是，页面的左端似乎超出了屏幕的左边缘，将滚动条向右移动，使页面超出了 jumbotron 标题的边缘。

如何使页面在屏幕上居中？

这是我的完整代码：

<!DOCTYPE html>
<html>

    <head>
        <title>My Name</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
              rel="stylesheet">
    </head>

    <body>
        <div class="jumbotron text-center">
            <h1>My Name</h1>
        </div>

        <div class="row">
            <h2>What I've Been Up To</h2>
        </div>

    </body>

    <footer>
        <p> Copyright &copy;
        <!--Script displays the current year-->
        <script type="text/javascript">
            var d = new Date()
            document.write(d.getFullYear())
        </script>
        </p>
    </footer>

</html>

Screenshot of HTML Page

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

使用 bootstrap 的网格系统时，您的内容应该在 row 分类 div 和 col-xx-xx 分类 div 中。这些行的边距为 -15px，这就是为什么您的内容被推出容器的原因。那是为了补偿 col 类的 15px 边距，用于在一行中的多个列之间进行填充。它应该是这样的：

<div class="row">
    <div class="col-md-12>
        <h2>What I've Been Up To</h2>
    </div>
</div>

注意col-md-12 应更改为在任何给定情况下您想要的屏幕大小和列宽的适当类。

查看网格系统的文档以获取所有很酷的功能。 https://v4-alpha.getbootstrap.com/layout/grid/

【讨论】：

【解决方案2】：

你在寻找这样的东西吗？

https://jsfiddle.net/mergatroid/L2tLg3kj/

<div class="jumbotron text-center">
  <h1>Jumbotron Area</h1>
  <p>Area for a call to action or tagline...</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <div class="box">
        <h3>Column 3</h3>
        <p>Lorem ipsum dolor..</p>
        <p>Ut enim ad..</p>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="box">
        <h3>Column 3</h3>
        <p>Lorem ipsum dolor..</p>
        <p>Ut enim ad..</p>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="box">
        <h3>Column 3</h3>
        <p>Lorem ipsum dolor..</p>
        <p>Ut enim ad..</p>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="box">
        <h3>Column 3</h3>
        <p>Lorem ipsum dolor..</p>
        <p>Ut enim ad..</p>
      </div>
    </div>
  </div>
</div>

【讨论】：