我希望面板标题“已修复”。在顶部。我试过了：
.panel-heading {
position: fixed;
width: 100%;
z-index: 99999;
top: 0;
}
它适用于任何低于768px的物体，但对于任何高于它的物体都会超出范围。关于为什么会发生这种情况的任何想法？
.glyphicon-user {
font-size: 25px;
color: #3399ff;
margin-left: 15px;
}
.panel-heading {
position: fixed;
width: 100%;
z-index: 99999;
top: 0;
}
.panel-heading h1 {
padding-bottom: 0.65em;
color: #3399ff;
font-weight: bold;
}
.panel-body {
padding: 0;
}
.col-xs-12 {
padding-left: 0;
padding-right: 0;
}
.chats {
list-style-type: none;
margin: 0;
padding: 0;
}
.chats li {
border-bottom: 2px solid #eee;
}
.chats a {
display: block;
color: #000;
text-decoration: none;
height: 85px;
padding: 15px 0;
}
.chats a:hover,
.chats a:hover .glyphicon-user,
.chats a:hover .text-muted {
background-color: #3399ff;
color: white;
}
.chats .sender {
margin-left: 10px;
}
.chats .timestamp {
margin-right: 15px;
}
.chats .chat-sample {
clear: right;
margin-left: 50px;
padding-top: 5px;
margin-right: 15px;
}
.chats li:last-child {
border-bottom: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
<div class='row'>
<div class='col-sm-6 col-xs-12 col-centered'>
<div class='panel panel-default'>
<div class='panel-heading'>
<div class='btn-group pull-left'>
<div class='dropdown'>
<button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'>
<span class='glyphicon glyphicon-cog'</span>
</button>
<ul class='dropdown-menu'>
<li><a href='#'>Delete All Chats</a></li>
<li><a href='#'>Log Out</a></li>
</ul>
</div>
</div>
<div class='btn-group pull-right'>
<div class='dropdown'>
<button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'>
<span class='glyphicon glyphicon-plus'></span>
</button>
<ul class='dropdown-menu dropdown-menu-right'>
<li><a href='#'>New Chat</a></li>
</ul>
</div>
</div>
<h1 class='panel-title text-center'>FunChat</h1>
</div>
<div class='panel-body'>
<ul class='chats'>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>John Appleseed</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>What time is it?</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Verizon Wireless</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Your bill is due on 12/12/2012. Please pay before the due date to avoid service interuption. ...</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Sergey Brin</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Come down to the Googleplex for an interview. We would like to talk to you about some exciti...</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>John Appleseed</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>What time is it?</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Verizon Wireless</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Your bill is due on 12/12/2012. Please pay before the due date to avoid service interuption. ...</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Sergey Brin</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Come down to the Googleplex for an interview. We would like to talk to you about some exciti...</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>John Appleseed</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>What time is it?</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Verizon Wireless</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Your bill is due on 12/12/2012. Please pay before the due date to avoid service interuption. ...</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Sergey Brin</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Come down to the Googleplex for an interview. We would like to talk to you about some exciti...</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>John Appleseed</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>What time is it?</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Verizon Wireless</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Your bill is due on 12/12/2012. Please pay before the due date to avoid service interuption. ...</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Sergey Brin</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Come down to the Googleplex for an interview. We would like to talk to you about some exciti...</p>
</a>
</li>
</ul>
</div>
</div>
</div><!--end column-->
</div><!--end row 1-->
</div><!--end container-->
答案 0 :(得分：1)
更改.panel-heading的CSS：
.panel-heading {
position: fixed;
width: 100%;
z-index: 99999;
top: 0;
}
到此：
.panel-heading {
position: sticky;
width: 100%;
z-index: 99999;
top: 0;
}