为什么引导面板占用页眉区域?如何解决这个问题呢?
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>