6

ブートストラップでスタイリングの問題が発生しています。

ドロップダウンを含む小さなモーダル ウィンドウがあります。ただし、ドロップダウンをウィンドウのフッターに表示することはできません。

ドロップダウンのzindexで遊んで、ウィンドウよりも高いことを確認しましたが、うまくいきませんでした。

誰が私が何を変更すべきかを提案できますか?

html

<div class="modal hide fade" id="store-modal">
<div class="modal-header">
    <h3 id="reward-title">Select Store</h3>
</div>
<div class="modal-body">
    <p>
        Please select the store you are working from
            <div class="btn-group">
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Select<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    @foreach (var model in Model)
                    {
                        <li>
                            <a href="#" class="store" data-id="@Html.DisplayFor(modelItem => model.StoreId)">@Html.DisplayFor(modelItem => model.StoreName)</a>
                        </li>
                    }
                </ul>
            </div>

    </p>
</div>
<div class="modal-footer">
</div>

ここに画像の説明を入力

4

2 に答える 2

3

z-indexモデルボックスフッターよりも高い属性を持つクラスを追加するだけです。

z-index を機能させるには、position = relative、absolute、または fixed を設定する必要もあります。また、z-index を 5000 などにすると役立つ場合があります。(モーダルの z インデックスは 2000 年代よりも高い場合があります。

だからあなたのCSSにこれを追加します：

.class-of-dropdown {
    position: relative;
    z-index: 5000;
}

.modal-body クラスには、overflow-y: auto プロパティがあります。これを次のように変更する必要がある場合があります。

.modal-body {
    overflow-y:visible;
}
于 2013-11-14T16:04:39.110 に答える
2

ドロップダウンの z-index を設定する場合は、それが配置されていることを確認してください。つまり、position:absolute、position:relative、または position:fixed のいずれかです。

于 2013-01-11T08:14:51.560 に答える