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

これら2つのファイルを使用していますか？詳しくはこちらをご覧ください。

于 2013-07-12T14:29:35.473 に答える