Question

我是创建响应式模板的初学者，我想创建一个像这个网站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;
 }
}

Answer 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"/>

您使用这两个文件吗？有关详细信息，请参阅here。

bootstrap侧边栏和内容宽度

1 个答案: