为什么引导面板占用页眉区域?如何解决这个问题呢?

codepen.io/anon/pen/LEzJZE



<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<body>
	<section class="container">
		<section class="row">
			<header class="col-lg-12 text-center">
				<h1 class"page-header">Header <small>Join Here</small></h1>
			</header>

			<section class="panel panel-default">
				<div class="panel-heading">
					Attention
				</div>
				<div class="panel-body">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi deleniti nam harum autem vitae facilis impedit optio saepe perspiciatis maxime, consectetur sed earum soluta! Perspiciatis voluptas quisquam recusandae officia dolore.</p>
					<a href="#" class="btn btn-default btn-sm">Accept</a>
					<a href="#" class="btn btn-danger btn-sm">Decline</a>
				</div>
				<div class="panel-footer">
					lorem Ipsum <a href="#">Lorem</a>
				</div>
			</section>

			<div class="row">
  				<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  			<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9
  			</div>
  			<footer>

			</footer>
		</section>
	</section>
</body>

最佳答案

将header标记移到div class ='row'标记之外。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<body>
    <header class="col-lg-12 text-center">
        <h1 class"page-header">Header <small>Join Here</small></h1>
    </header>
    <section class="container">
        <section class="row">
            <section class="panel panel-default">
                <div class="panel-heading">
                    Attention
                </div>
                <div class="panel-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi deleniti nam harum autem vitae facilis impedit optio saepe perspiciatis maxime, consectetur sed earum soluta! Perspiciatis voluptas quisquam recusandae officia dolore.</p>
                    <a href="#" class="btn btn-default btn-sm">Accept</a>
                    <a href="#" class="btn btn-danger btn-sm">Decline</a>
                </div>
                <div class="panel-footer">
                    lorem Ipsum <a href="#">Lorem</a>
                </div>
            </section>

            <div class="row">
                <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
            <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9
            </div>
            <footer>
            </footer>
        </section>
    </section>
</body>

10-06 00:57