（我删除了我的其他帖子，因为我希望用迄今为止的内容进行更新）
我希望为聊天历史创建一个导航栏，就像Facebook一样。我希望我的用户垂直分组，他们的个人资料图片和最后发送的信息显示得很整齐，如下所示：
http://i.imgur.com/pSrU7Wc.png
但是，由于以下原因，此布局存在问题：
（已修复）该列表似乎没有按照我希望的方式响应（悬停在单个用户上方只是突出显示超链接）
图片与发送者的姓名/上一条消息之间没有间距（我该如何解决？）
顶部的搜索栏没有与整个条宽一起拉（我尝试使用右拉，但这似乎不起作用）
整个条形锁定在左侧。理想情况下，我希望有一些利润，类似于Facebook的风格。我可以用什么来获得这个？
我使用仪表板布局（http://getbootstrap.com/examples/dashboard/）作为起点。
以下是我到目前为止使用bootstrap的内容：
<!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>
这是我使用的自定义CSS（请注意，这主要是原始布局中的CSS，我的变化很小）：
@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;
}
非常感谢任何帮助！