1

Bootstrap を使用してドロップダウン メニューを作成しようとしていますが、レスポンシブにすることができません。これは私のメニューです：

ここに画像の説明を入力

しかし、ウィンドウのサイズを変更しても、サイズは変更されず、幅は一定のままです。

ここに画像の説明を入力

これが私のコードです:

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

別の解決策は、パネルを展開する通常のボタンを使用することです。 

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

このフィドルを確認できます。

レスポンシブ画像も使用しました。

于 2013-08-23T10:08:56.190 に答える
0

ドロップダウン メニューの css を次のように設定します。

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

em はあるレベルでサイズ変更があまりできないため、幅が固定されます。フォントサイズの方が便利です。そのため、メニューのサイズを変更できません。また、幅を設定する前に、幅スタイルを削除してドロップダウンメニューを確認してください。ブートストラップがそれ自体を処理すると思うからです。また、bootstrap に提供されている css ファイルresponsive.cssを利用してみてください。

于 2013-08-23T06:42:11.530 に答える