Question

我正在使用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

Answer 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/

Answer 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>

Bootstrap HTML页面向左延伸超出屏幕

2 个答案: