2013-07-12 2 views
0

я новичок в создании адаптивный шаблон и я хочу, чтобы создать макет с начальной загрузки приложения, как этот сайт http://wrapbootstrap.com/preview/WB0F35928самозагрузки боковой панели и ширина содержимого

основной DIV будет боковая панель и содержание DIV, который выглядит как сайт я 've указано выше,

проблема в том, что я применил ее на своей собственной странице, откликая часть не функционирует, это как обычный не реагирующий шаблон. У меня уже есть все требования 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; 
} 

в бутстраповской-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; 
} 
} 

ответ

1

Для Twitter 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 за более подробной информацией.

+0

решил это уже .. все равно! ..^_ ^ – cfz

Смежные вопросы