Css 在引导中创建响应菜单_Css_Twitter Bootstrap_Responsive Design

Css 在引导中创建响应菜单

css twitter-bootstrap responsive-design

Css 在引导中创建响应菜单,css,twitter-bootstrap,responsive-design,Css,Twitter Bootstrap,Responsive Design,我试图创建一个下拉菜单使用引导，但我不能使其响应。这是我的菜单：但当我调整窗口大小时，它并没有调整大小&宽度保持不变这是我的密码： <!DOCTYPE html> <html> <head> <title>Bootstrap test</title>  <link rel="stylesheet" hre

我试图创建一个下拉菜单使用引导，但我不能使其响应。这是我的菜单：

但当我调整窗口大小时，它并没有调整大小&宽度保持不变

这是我的密码：

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


自举检验
p{
文本对齐：居中；
}
img{
最大宽度：100%；
}
.下拉菜单{
宽度：50em；
}
行动
我的菜单
东西
东西
东西
东西
东西
东西
东西
东西
东西
东西
东西
东西

将下拉菜单css设置为

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

您的宽度变为固定宽度，因为em在某种程度上无法调整大小，它在字体大小方面更有用，所以菜单无法调整大小。另外，在设置宽度之前，请尝试通过删除宽度样式来检查下拉菜单，因为我认为引导程序可以自己处理它。此外，引导提供css文件

响应。css

尝试使用它。

将下拉菜单css设置为

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

您的宽度变为固定宽度，因为em在某种程度上无法调整大小，它在字体大小方面更有用，所以菜单无法调整大小。另外，在设置宽度之前，请尝试通过删除宽度样式来检查下拉菜单，因为我认为引导程序可以自己处理它。另外，引导提供css文件

响应。css

尝试使用它。

另一个解决方案是使用常规按钮来扩展面板

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

动作
我的菜单
东西
东西
东西
东西
东西
东西
东西
东西
东西
东西
东西
东西

你可以检查一下

我也使用了响应图像

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

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

动作
我的菜单
东西
东西
东西
东西
东西
东西
东西
东西
东西
东西
东西
东西

你可以检查一下

我也使用了响应图像

这可能是因为您为.下拉菜单设置了静态宽度。如果您查看文档，它总是有帮助的：）我在ems中指定了.dropdown菜单的宽度。在ems中指定不是静态的，对吗？是的，em的值基于字体大小，你应该使用percentagesOh，明白了。我对ems感到困惑。可能是因为您为.下拉菜单设置了静态宽度。如果您查看文档，它总是有帮助的：）我在ems中指定了.dropdown菜单的宽度。在ems中指定不是静态的，对吗？是的，em的值基于字体大小，你应该使用percentagesOh，明白了。我对ems感到困惑。OP正在使用Bootstrap 3，响应能力现在就建立在核心中，没有单独的css文件是的，我正在使用BS3。我删除了宽度样式，它看起来太窄了。我添加了以百分比表示的宽度，但当我调整窗口大小时它仍然不起作用。OP正在使用Bootstrap 3，响应能力现在就建立在核心中，没有单独的css文件是的，我正在使用BS3。我删除了宽度样式，它看起来太窄了。我添加了百分比宽度，但当我调整窗口大小时它仍然不起作用。非常感谢！成功了。但我不明白为什么我的解决方案使用一个显示面板的常规按钮。您正在强制按钮组包含面板。你可以让它工作，但它需要很多努力。非常感谢！成功了。但我不明白为什么我的解决方案使用一个显示面板的常规按钮。您正在强制按钮组包含面板。你可以让它工作，但它需要很多努力。