0

我是创建响应式模板的初学者，我想创建一个带有引导应用程序的布局，例如这个站点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;
 }
}
4

1 回答 1

1

要使 twitter 引导程序具有响应性，您不仅必须使用引导程序 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"/>

你在用这两个文件吗？有关详细信息，请参阅此处。

于 2013-07-12T14:29:35.473 回答