diff --git a/public/javascripts/responsive.js b/public/javascripts/responsive.js
index 82f4707..642ebcd 100644
--- a/public/javascripts/responsive.js
+++ b/public/javascripts/responsive.js
@@ -4,7 +4,12 @@ $(document).ready(function(){
       $sidebar = $('#sidebar'),
       $main = $('#main'),
       startX = 0,
-      swipeThreshold = 10,
+      startY = 0,
+      delta = {
+        x: 0,
+        y: 0
+      },
+      swipeThreshold = 20,
       toggleSideBar = function(){
         var isShow = $responsiveBtn.data('is-show'),
             mainHeight = $main.height(),
@@ -19,31 +24,41 @@ $(document).ready(function(){
       touchstart = function(e){
         var touchs = e.targetTouches;
         startX = +touchs[0].pageX;
+        startY = +touchs[0].pageY;
+        delta.x = delta.y = 0;
+        document.body.addEventListener('touchmove', touchmove, false);
+        document.body.addEventListener('touchend', touchend, false);
       },
       touchmove = function(e){
         var touchs = e.changedTouches;
-        if(Math.abs(+touchs[0].pageX - startX) > swipeThreshold){
+        delta.x = +touchs[0].pageX - startX;
+        delta.y = +touchs[0].pageY - startY;
+        //当水平距离大于垂直距离时，才认为是用户想滑动打开右侧栏
+        if(Math.abs(delta.x) > Math.abs(delta.y)){
           e.preventDefault();
         }
       },
       touchend = function(e){
         var touchs = e.changedTouches,
-            x = +touchs[0].pageX,
-            winWidth = $(window).width(),
+            docWidth = $(document).width(),
             isShow = $responsiveBtn.data('is-show');
-        if(!isShow && (startX > winWidth*3/4) && Math.abs(startX - x) > swipeThreshold){
+        delta.x = +touchs[0].pageX - startX;
+        //右侧栏未显示&&用户touch点在屏幕右侧1/4区域内&&move距离大于阀值时，打开右侧栏
+        if(!isShow && (startX > docWidth*3/4) && Math.abs(delta.x) > swipeThreshold){
           $responsiveBtn.trigger('click');
         }
-        if(isShow && (startX < winWidth*1/4) && Math.abs(startX - x) > swipeThreshold){
+        //右侧栏显示中&&用户touch点在屏幕左侧侧1/4区域内&&move距离大于阀值时，关闭右侧栏
+        if(isShow && (startX < docWidth*1/4) && Math.abs(delta.x) > swipeThreshold){
           $responsiveBtn.trigger('click');
         }
-        startX = 0;
+        startX = startY = 0;
+        delta.x = delta.y = 0;
+        document.body.removeEventListener('touchmove', touchmove, false);
+        document.body.removeEventListener('touchend', touchend, false);
       };
 
   if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch){
     document.body.addEventListener('touchstart', touchstart);
-    document.body.addEventListener('touchmove', touchmove);
-    document.body.addEventListener('touchend', touchend);
   }
 
   $responsiveBtn.on('click', toggleSideBar);
diff --git a/public/stylesheets/responsive.css b/public/stylesheets/responsive.css
index 41b21ed..f00a145 100644
--- a/public/stylesheets/responsive.css
+++ b/public/stylesheets/responsive.css
@@ -33,11 +33,13 @@
 
 @media (max-width: 979px) {
 	.navbar{
-		margin:0 auto;
+		margin:0 5px;
 		z-index: 999;
+		width: auto !important;
 	}
 	.navbar .container, #main, #content, #footer_main{
 		width: 100%;
+		min-width: 0;
 	}
 	.navbar .nav.pull-right{
 		float: none;
@@ -53,6 +55,9 @@
 		margin: 20px auto;
 		min-height: 0;
 	}
+	#content .panel{
+		margin: 0 5px;
+	}
 	#sidebar{
 		float: none;
 		position: absolute;
@@ -69,12 +74,35 @@
 		transition: .3s right;
 	}
 	#content .topic_title{
-		white-space: normal;
+		font-size: 1em !important;
+		line-height: 1em !important;
+		vertical-align: baseline;
+		width: 100%;
 	}
 	#content .last_time{
 		position: absolute;
-		top: 10px;
+		bottom: 0;
 		right: 10px;
+		font-size: 0.8em;
+	}
+	#content .last_time img{
+		display: none;
+	}
+	#content .reply_count{
+		position: absolute;
+		bottom: 0;
+		left: 50px;
+		text-align: left;
+	}
+	.topic_title_wrapper{
+		line-height: 1em;
+		padding-left: 40px;
+	}
+	#main .topic_content p a.content_img, #main .reply_content p a.content_img{
+		width: 100%;
+	}
+	#footer{
+		margin: 0 5px 5px;
 	}
 	#footer_main{
 		text-align: center;
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 69328de..b6a49eb 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -12,7 +12,9 @@ body {
 }
 
 #main {
-  width: 1120px;
+  width: 90%;
+  max-width: 1400px;
+  min-width: 960px;
   margin: 40px auto;
   min-height:400px;
   position: relative;
@@ -22,7 +24,7 @@ body {
 }
 #content {
   padding: 0;
-  width: 818px;
+  margin-right: 300px;
 }
 #sidebar {
   width: 290px;
@@ -417,7 +419,7 @@ a.user_avatar:hover {
 }
 .reply_content {
   padding-left: 50px;
-  color: black;
+  color: #333;
 }
 .reply_editor {
   height: 200px;
@@ -446,9 +448,15 @@ a.topic_title {
     font-size: 16px;
 }
 #topic_list a.topic_title {
-    color: black;
+    color: #333;
+}
+#topic_list a.topic_title:visited{
+  color: #888;
+}
+.topic_title_wrapper{
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-
 .star_name {
 }
 img.unread {
@@ -604,7 +612,8 @@ textarea[id^=wmd-input] {
   box-shadow: none;
 }
 .navbar .container {
-  width: 1120px;
+  width: 100%;
+  min-width: 960px;
   margin: 0px auto;
 }
 .navbar .brand {
diff --git a/views/topic/abstract.html b/views/topic/abstract.html
index c44331a..a625f60 100644
--- a/views/topic/abstract.html
+++ b/views/topic/abstract.html
@@ -1,12 +1,12 @@
 <div class='cell'>
 
-  <a class="user_avatar" href="/user/<%= topic.author.name %>">
+  <a class="user_avatar pull-left" href="/user/<%= topic.author.name %>">
     <img src="<%= topic.author.avatar_url %>"
       title="<%= topic.author.name %>"
     />
   </a>
 
-  <span class="reply_count">
+  <span class="reply_count pull-left">
     <span class="count_of_replies" title="回复数">
       <%= topic.reply_count %>
     </span>
@@ -16,21 +16,23 @@
     </span>
   </span>
 
+  <% if (topic.reply) {%>
+    <a class='last_time pull-right' href="/topic/<%= topic._id %><%- '#' + topic.reply._id %>">
+      <img class="user_small_avatar" src="<%= topic.reply.author.avatar_url %>">
+      <%= topic.reply.friendly_create_at %>
+    </a>
+  <% } %>
+  <% if (!topic.reply) {%>
+    <span class='last_time pull-right'><%= topic.friendly_create_at %></span>
+  <% } %>
+
   <!--<%- partial('tag/tag_in_abstract',{collection:topic.tags, as:'tag'}) %>-->
+  <div class="topic_title_wrapper">
   <a class='topic_title' href='/topic/<%= topic._id %>'>
     <% if (topic.top) { %>
       <span class='put_top'>置顶</span>
     <% } %>
     <%= topic.title %>
   </a>
-
-  <% if (topic.reply) {%>
-    <a class='last_time' href="/topic/<%= topic._id %><%- '#' + topic.reply._id %>">
-      <img class="user_small_avatar" src="<%= topic.reply.author.avatar_url %>">
-      <%= topic.reply.friendly_create_at %>
-    </a>
-  <% } %>
-  <% if (!topic.reply) {%>
-    <span class='last_time'><%= topic.friendly_create_at %></span>
-  <% } %>
+  </div>
 </div>