Question

我正在尝试使用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>

Answer 1

另一种解决方案是使用扩展面板的常规按钮。

<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。

我也使用了响应式图片 。

Answer 2

将下拉菜单css设置为

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

你的宽度变得固定，因为em在某种程度上不能大小调整它在font-size中更有用，所以菜单无法调整大小。并且在设置宽度之前尝试通过删除宽度样式来检查下拉菜单，因为我认为bootstrap自己处理它。另外bootstrap提供css文件responsive.css尝试使用它。

在Bootstrap中创建响应式菜单

2 个答案: