Создание отзывчивого меню в Bootstrap

Я пытаюсь создать раскрывающееся меню с помощью Bootstrap, но я не могу сделать его отзывчивым. Это мое меню:Создание отзывчивого меню в Bootstrap

enter image description here

Но когда я изменить размер окна, это не изменение размера & ширина остается неизменной.

enter image description here

Вот мой код:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bootstrap test</title> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
    <style type="text/css"> 
    p{ 
     text-align: center; 
    } 
    img { 
     max-width:100%; 
    } 
    .dropdown-menu{ 
     width: 50em; 
    } 
    </style> 

</head> 
<body> 

    <div class="btn-group"> 
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
      Action <span class="caret"></span> 
     </button> 
     <div class="dropdown-menu" role="menu"> 
       <div class="panel panel-default"> 
        <div class="panel-heading">My Menu</div> 
        <div class="panel-body"> 
         <div class="row"> 
          <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech"><p>Stuff</p></div> 
          <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech"><p>Stuff</p></div> 
          <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech"><p>Stuff</p></div> 
          <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech"><p>Stuff</p></div> 
          <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech"><p>Stuff</p></div> 
          <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech"><p>Stuff</p></div> 
         </div> 
         <div class="row"> 
          <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech"><p>Stuff</p></div> 
          <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech"><p>Stuff</p></div> 
          <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech"><p>Stuff</p></div> 
          <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech"><p>Stuff</p></div> 
          <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech"><p>Stuff</p></div> 
          <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech"><p>Stuff</p></div> 
         </div> 
        </div> 
       </div> 
     </div> 
    </div> 
</body> 
</html>

источник

2013-08-23 avi

Возможно, это связано с тем, что вы устанавливаете статическую ширину для .dropdown-menu. Это всегда помогает, если вы посмотрите на документацию :) – taevanbat

Я указал ширину .dropdown-menu в ems. Задание в ems не является статическим? – avi

Это значение em основано на размере шрифта, вы должны использовать проценты –

Другим решением будет использование обычной кнопки, которая расширяет вашу панель.

<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#my-menu">Action <span class="caret"></span></button> 
<div id="my-menu" class="panel panel-default collapse"> 
    <div class="panel-heading">My Menu</div> 
    <div class="panel-body"> 
    <div class="row"> 
     <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech" class="img-responsive"><p>Stuff</p></div> 
     <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech" class="img-responsive"><p>Stuff</p></div> 
     <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech" class="img-responsive"><p>Stuff</p></div> 
     <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech" class="img-responsive"><p>Stuff</p></div> 
     <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech" class="img-responsive"><p>Stuff</p></div> 
     <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech" class="img-responsive"><p>Stuff</p></div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech" class="img-responsive"><p>Stuff</p></div> 
     <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech" class="img-responsive"><p>Stuff</p></div> 
     <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech" class="img-responsive"><p>Stuff</p></div> 
     <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech" class="img-responsive"><p>Stuff</p></div> 
     <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech" class="img-responsive"><p>Stuff</p></div> 
     <div class="col-xs-2"><img src="http://placeimg.com/128/128/tech" class="img-responsive"><p>Stuff</p></div> 
    </div> 
    </div> 
</div>

Вы можете проверить это fiddle.

Я также использовал отзывчивые изображения.

источник

2013-08-23 10:08:56 LeftyX

Спасибо большое! Это сработало. Но я не могу понять, почему – avi

Мое решение использует обычную кнопку, которая показывает панель. Вы заставляли группу кнопок содержать панель. Вы можете заставить его работать, но это требует больших усилий. – LeftyX

Установите выпадающее меню CSS для

.dropdown-menu{ 
     width: 66%; 
     overflow:hidden; 
    }

Вы ширина фиксируется в ем не так много способен изменять размеры в какой-то выравнивать более полезна в размер шрифта, поэтому меню не может изменять размер. А также перед установкой ширины попробуйте проверить выпадающее меню, удалив стиль ширины, потому что я думаю, что bootstrap обрабатывает его сам. Кроме того, bootstrap предоставляет файл css responsive.css, попробуйте использовать его.

источник

2013-08-23 06:42:11 Ashwani

OP работает с Bootstrap 3, отзывчивость теперь построена прямо в ядре, нет отдельного файла css –

Yup, я работаю с BS3. Я удалил стиль ширины, он кажется слишком узким. Я добавил ширину в процентах, но все же она не работает, когда я изменяю размер окна. – avi

Создание отзывчивого меню в Bootstrap

ответ

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