引导侧边栏和内容宽度答案

【问题标题】：bootstrap sidebar and content width引导侧边栏和内容宽度
【发布时间】：2013-07-12 08:57:41
【问题描述】：

我是创建响应式模板的初学者，我想创建一个带有引导应用程序的布局，例如这个网站http://wrapbootstrap.com/preview/WB0F35928

主 div 是侧边栏和内容 div，看起来就像我上面提到的网站，

问题是当我将它应用到我自己的页面时，响应部分不起作用，它就像一个普通的非响应模板。我已经有了响应式模板的所有 js 要求，但它仍然无法正常工作。

这是我的 html 代码：

 <div class="sidebar">
  <ul style="background:#aaa; margin-left:0 !important;">
    <li>list1</li>
    <li>list2</li>
  </ul>
</div>

<div class="content">
  <div class="container-fluid"> 
      This is a sample content
  </div>
</div>

css：

.sidebar{
display:block;
 }
.sidebar > ul{
margin:10px 0 0;
padding:0;
position:absolute;
width:220px;
}
.content{
margin-right:0;
margin-left:220px;
min-height:740px;
padding-bottom:0 !important;
position:relative;
width:auto;
background:#fff;
}

在 bootstrap-responsive.css 我把这个：

@media (max-width: 767px){
 .content{
   margin-left:0 !important;
 }
}
@media (max-width: 767px){
 .sidebar{
   float:none;
   width:100%;
  }
 .sidebar > ul{
   width:100%;
   position:relative;
 }
}

【问题讨论】：

标签： twitter-bootstrap responsive-design media-queries

【解决方案1】：

要让 twitter bootstrap 响应式，您不仅必须使用 bootstrap JS 和 css 文件，还必须使用响应式 css 文件，如下所示：

<link rel="stylesheet" type="text/css" href="/AgTracker/resources/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/AgTracker/resources/css/bootstrap-responsive.min.css"/>

你在使用这两个文件吗？详情请参阅here。

【讨论】：