Question

我正在使用page-header类来集中我的网页的主要内容。这会在page-header的任意一侧创建一些空列空间，我想利用该空间（可能添加AdSense横幅广告）。

以下是我的尝试：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test Title</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <a href="" class="navbar-brand">Click Me!</a>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-md-2 pull-left">
                    <span>Left Ding</span>
                </div>

                <div class="col-md-8">
                    <div class="page-header">
                        <h2>I'm a big centered page header!</h2>
                    </div>
                </div>

                <div class="col-md-2 pull-right">
                    <span>Right Dong</span>
                </div>
            </div>
        </div>
    </body>
</html>

我在页面的任何位置都看不到Left Ding或Right Dong。这是渲染的html：https://jsfiddle.net/bgmjs3qf/

使用左右列空格的正确方法是什么？

Answer 1

由于您有固定的导航栏，因此您必须在页面顶部添加填充。

参见示例和Docs。

body {
  padding-top: 70px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header"> <a href="" class="navbar-brand">Click Me!</a>

    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-2 pull-left"> <span>Left Ding</span>

    </div>
    <div class="col-md-8">
      <div class="page-header">
        <h2>I'm a big centered page header!</h2>

      </div>
    </div>
    <div class="col-md-2 pull-right"> <span>Right Dong</span>

    </div>
  </div>
</div>

Bootstrap 3：利用页面标题外的左右列空格

1 个答案: