bootstrap affix工作正常但不幸的是粘性标签在.container中没有显示为全宽。是否有任何选项可以将nav-tabs放入容器中？
演示：http://codepen.io/anon/pen/vOyZGq
$(document).ready(function() {
$('#details-dropdown li a').click(function(e) {
window.location = this.hash;
$("#details-menu li").removeClass("active");
$('#details-menu li a[href="' + $(this).attr('href') + '"]').parent().addClass('active');
});
$('#details-menu').affix({
offset: {
top: $("#details-menu").offset().top
}
});
});#details-menu {
z-index: 99;
background-color: #fff;
}
#details-menu.affix {
top: 0;
left: 0;
right: 0;
margin: auto;
}
.tab-content {
border: 1px solid #ddd;
border-top: none;
padding: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<body data-spy="scroll" data-target="#mynav">
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse" id="mynav">
<ul class="nav navbar-nav">
<li class="active"><a href="#home">Home</a>
</li>
<li><a href="#details">Details</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">My details <b class="caret"></b></a>
<ul class="dropdown-menu" id="details-dropdown">
<li role="presentation"><a href="#myabout" data-toggle="tab" role="tab">About</a>
</li>
<li role="presentation"><a href="#myprofile" data-toggle="tab" role="tab">Profile</a>
</li>
<li role="presentation"><a href="#mymessage" data-toggle="tab" role="tab">Messages</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" id="home">
<div class="jumbotron form-group">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non magnam eius voluptatum dignissimos aspernatur quas ab, consequuntur aliquid earum veniam. Fuga maiores possimus distinctio unde quae, corrupti perspiciatis adipisci, inventore!</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
<div class="col-md-12">
<h1>My details</h1>
<ul role="tablist" class="nav nav-tabs" id="details-menu">
<li role="presentation" class="active"><a href="#myabout" data-toggle="tab" role="tab">About</a>
</li>
<li role="presentation"><a href="#myprofile" data-toggle="tab" role="tab">Profile</a>
</li>
<li role="presentation"><a href="#mymessage" data-toggle="tab" role="tab">Messages</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="myabout">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum soluta numquam voluptate repellendus minima, porro, reiciendis explicabo iste expedita neque quidem voluptates dignissimos! Tempore odio vel, natus ipsa alias temporibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet nobis iste velit veniam perferendis non sunt labore ad, aliquid eius voluptate nostrum impedit quia quo consequuntur sit. Quam asperiores, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, quisquam adipisci. Distinctio perferendis repudiandae recusandae totam eligendi! Dicta eveniet facilis impedit porro cumque iusto culpa non eum error voluptas. Esse!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero rerum laboriosam, mollitia repudiandae inventore ea, voluptas harum nihil. Earum beatae tempore necessitatibus unde, deleniti rem recusandae dicta ut impedit dolore!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
</div>
<div role="tabpanel" class="tab-pane" id="myprofile">
<h2>Profile</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
</div>
<div role="tabpanel" class="tab-pane" id="mymessage">
<h2>Message</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
</div>
</div>
</div>
</div>
</div>
</body>