Html 引导：类似Facebook的聊天信息导航
（我删除了我的另一篇文章，因为我想用我目前为止所做的更新） 我希望为聊天历史创建一个导航栏，就像Facebook一样。我希望我的用户垂直分组，并将其配置文件图像和最后发送的消息整齐显示，如下所示： 但是，由于以下原因，此布局存在问题：Html 引导：类似Facebook的聊天信息导航,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,（我删除了我的另一篇文章，因为我想用我目前为止所做的更新） 我希望为聊天历史创建一个导航栏，就像Facebook一样。我希望我的用户垂直分组，并将其配置文件图像和最后发送的消息整齐显示，如下所示： 但是，由于以下原因，此布局存在问题： （已修复）列表似乎没有按照我希望的方式响应（将鼠标悬停在单个用户上只会突出显示超链接） 图像和发送的人的姓名/最后一条消息之间没有间隔（如何修复此问题？） 顶部的搜索栏不会与整个栏宽一起拉（我尝试使用“向右拉”，但这似乎不起作用） 整个酒吧被锁定在左侧。理想情况
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="http://getbootstrap.com/assets/ico/favicon.ico">
<title>Chat</title>
<!-- Bootstrap core CSS -->
<link href="style.css" rel="stylesheet">
<style type="text/css"></style><style id="holderjs-style" type="text/css"></style></head>
<body style="">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-3 sidebar">
<li class="clearfix">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</li>
<ul class="nav nav-sidebar">
<li class="clearfix"><a href="#"><span class="chat-img pull-left">
<img src="http://www.goldenmeancalipers.com/wp-content/uploads/2011/12/mirror11.jpg" class="img-circle" height="40" width="40"/>
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">User A</strong> <small class="pull-right text-muted"><span class="glyphicon glyphicon-time"></span>10 mins ago</small>
</div>
<p>
Last message sent A
</p>
</div>
</a>
</li>
<li class="clearfix"><a href="#"><span class="chat-img pull-left">
<img src="http://i.telegraph.co.uk/multimedia/archive/01079/health-graphics-20_1079972a.jpg" class="img-circle" height="40" width="40"/>
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">User B</strong> <small class="pull-right text-muted"><span class="glyphicon glyphicon-time"></span>12 mins ago</small>
</div>
<p>
Last message sent B
</p>
</div>
</a>
</li> <li class="clearfix"><a href="#"><span class="chat-img pull-left">
<img src="http://www.curlhairstyles.com/wp-content/uploads/2012/04/short-pixie-hairstyles-for-round-faces-2012.jpg" class="img-circle" height="40" width="40"/>
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">User C</strong> <small class="pull-right text-muted"><span class="glyphicon glyphicon-time"></span>1 mins ago</small>
</div>
<p>
Last message sent C
</p>
</div>
</a>
</li> <li class="clearfix"><a href="#"><span class="chat-img pull-left">
<img src="http://turnlol.com/images/2012/10/women-models-mena-suvari-american-beauty-faces-white-background-1600x1200-hd-wallpaper.jpg" class="img-circle" height="40" width="40"/>
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">User D</strong> <small class="pull-right text-muted"><span class="glyphicon glyphicon-time"></span>1 hr ago</small>
</div>
<p>
Last message sent D
</p>
</div>
</a>
</li>
<li class="clearfix"><a href="#"><span class="chat-img pull-left">
<img src="http://4.bp.blogspot.com/-PWtDcqcFWcg/TtdkqM3IsZI/AAAAAAAABu4/AdkNyL8xe-U/s1600/smiling-faces01.jpg" class="img-circle" height="40" width="40"/>
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">User E</strong> <small class="pull-right text-muted"><span class="glyphicon glyphicon-time"></span>19 mins ago</small>
</div>
<p>
Last message sent E
</p>
</div>
</a>
</li> <li class="clearfix"><a href="#"><span class="chat-img pull-left">
<img src="http://dolchaybanana.blog.com/files/2010/12/ws_Aishwarya_Rai_face_1600x1200.jpg" class="img-circle" height="40" width="40"/>
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">User F</strong> <small class="pull-right text-muted"><span class="glyphicon glyphicon-time"></span>8 mins ago</small>
</div>
<p>
Last message sent F
</p>
</div>
</a>
</li> <li class="clearfix"><a href="#"><span class="chat-img pull-left">
<img src="http://4.bp.blogspot.com/-cYickKEX6gE/UL3_l5gzXcI/AAAAAAAA7MM/tsKJ5xyzfkM/s1600/famo+3.jpg" class="img-circle" height="40" width="40"/>
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">User G</strong> <small class="pull-right text-muted"><span class="glyphicon glyphicon-time"></span>29 mins ago</small>
</div>
<p>
Last message sent G
</p>
</div>
</a>
</li>
</a>
</ul>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./Dashboard Template for Bootstrap_files/jquery.min.js"></script>
<script src="./Dashboard Template for Bootstrap_files/bootstrap.min.js"></script>
<script src="./Dashboard Template for Bootstrap_files/docs.min.js"></script>
</body></html>
任何帮助都将不胜感激 从语义上讲，你不能把一个
@import url(css/bootstrap.css);
/*.nav {
padding: 0px 0;
}*/
/*
* Base structure
*/
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a {
color: #fff;
background-color: #428bca;
}