javascript - bootstrap 模态 div 上的圆 Angular

Question

我有一个 .NET 页面，它使用一些 Bootstrap 标记来创建一个稍后用作弹出模式的 div。我想圆 Angular 。虽然修改 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 并将 int 插入到 #contentDiv 中的网络服务，并且工作正常。这是我的圆 Angular 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;
}

为什么 border-radius 不起作用？我已将数字更改为一些剧烈的事情以查看它是否有所作为但没有任何变化。如前所述，我可以更改边框引用或宽度引用中的任何内容并查看更改，因此它看到了 .modal-dialog 类。这里有什么想法吗？

Answer 1

答案其实很明显，但我没有想清楚。我所要做的就是在每一行之后添加 !important，因为 bootstrap.css 优先。一旦我添加了 !important ，问题就立即解决了。只是想我会添加这个以防将来其他人遇到这个问题。