簡體   English   中英

引導模態div上的圓角

[英]Rounded corners on bootstrap modal div

我有一個.NET頁面,它使用一些Bootstrap標記來創建一個div,稍后將其用作彈出模式。 我想繞過角落。 雖然修改CSS似乎會影響邊框寬度和顏色,但我無法使border-radius起作用。 這是我的HTML:

<div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productModalLabel" aria-hidden="true">
        <div class="modal-dialog ui-corner-all">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="productModalLabel">Product</h4>
                </div>
                <div class="modal-body" id="contentDiv">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="orderClose">Close</button>
                    <button type="button" class="btn btn-primary" id="orderSave">Save Changes</button>
                </div>
            </div>
        </div>
    </div>

我的JQuery調用一個構建HTML的web服務並將int插入到#contentDiv中,並且工作得很好。 這是我的圓角CSS:

.modal-header {
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #0480be;
    -webkit-border-top-left-radius: 100px;
    -webkit-border-top-right-radius: 100px;
    -moz-border-radius-topleft: 100px;
    -moz-border-radius-topright: 100px;
     border-top-left-radius: 100px;
     border-top-right-radius: 100px;
 }


.modal-header {
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #0480be;
    -webkit-border-bottom-left-radius: 100px;
    -webkit-border-bottom-right-radius: 100px;
    -moz-border-radius-bottomleft: 100px;
    -moz-border-radius-bottomright: 100px;
     border-bottom-left-radius: 100px;
     border-top-right-radius: 100px;
 }

.modal-dialog {
    border: 3px solid #000000;
    width: 900px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
     border-radius: 100px;
}

為什么邊界半徑不起作用? 我已經將數字改為一些激烈的東西,看它是否有所作為,但沒有任何變化。 如上所述,我可以更改邊框引用或寬度引用中的任何內容並查看更改,因此它會看到.modal-dialog類。 這里有什么想法?

答案實際上是顯而易見的,但我並沒有想清楚。 我所要做的就是在每一行之后添加!important,因為bootstrap.css正在取得優勢。 一旦我添加!重要的是問題立即得到解決。 只是想我會添加這個以防萬一其他人將來有這個問題。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM