在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菜單設置了一個靜態寬度。它總是有幫助，如果你看看文檔:) – taevanbat

我已經在ems中指定.dropdown菜單的寬度。在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; 
    }

您寬度變固定爲EM是不是在一定程度上它更能夠調整大小的在字體大小上更有用，所以菜單無法調整大小。並且在設置寬度之前，嘗試通過刪除寬度樣式來檢查您的下拉菜單，因爲我認爲引導程序自己處理它。另外bootstrap提供的css文件responsive.css儘量利用它。

來源

2013-08-23 06:42:11 Ashwani

OP正在使用Bootstrap 3，響應能力現在已經建立在覈心，沒有單獨的css文件 –

是的，我正在使用BS3。我刪除了寬度樣式，它顯得太窄。我以百分比的形式添加了寬度，但在調整窗口大小時仍然不起作用。 – avi

在Bootstrap中創建一個響應菜單

回答

相關問題