1

I am trying to create a dropdown menu using Bootstrap, but I am not able to make it responsive. This is my menu :

enter image description here

But when I resize the window, it is not resizing & width stays constant.

enter image description here

Here is my code : 

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

2 回答 2

1

Another solution would be to use a regular button which expands your panel. 

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

You can check this fiddle.

I've used responsive images as well.

于 2013-08-23T10:08:56.190 回答
0

Set your dropdown menu css to

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

You width becomes fixed as em is not much capable of resize at some level it is more useful in font-size, So menu is unable to resize. And also before setting width try to check you drop-down menu by removing width style, because i think bootstrap handle it itself. In addition bootstrap provide css file responsive.css try make use of it.

于 2013-08-23T06:42:11.530 回答