twitter-bootstrap Bootstrap 模态 div 上的圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20848644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rounded corners on bootstrap modal div
提问by Michael Mahony
I have a .NET page that is using some Bootstrap markup to create a div that is later used as a popup modal. I want to round the corners. While modifying the CSS seems to effect the border width and color, I cannot make border-radius work. Here is my HTML:
我有一个 .NET 页面，它使用一些 Bootstrap 标记来创建一个 div，该 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">×</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>
My JQuery calls a webservice that builds HTML and inserts int into #contentDiv and that works just fine. Here is my CSS for the rounded corners:
我的 JQuery 调用构建 HTML 并将 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;
}
Why won't border-radius work? I have changed the number to some drastic things to see if it makes a difference but nothing changes. As stated, I can change anything in the border reference or the width reference and see the changes, so it is seeing the .modal-dialog class. any ideas here?
为什么边界半径不起作用？我已将数字更改为一些激烈的事情，以查看它是否有所作为，但没有任何变化。如前所述，我可以更改边框参考或宽度参考中的任何内容并查看更改，因此它正在查看 .modal-dialog 类。这里有什么想法吗？
回答by Michael Mahony
The answer was actually obvious but I was NOT thinking clearly. All I had to do was add !important after each line because the bootstrap.css was taking precendence. Once I added !important the problem was solved instantly. Just thought I would add this in case someone else has this problem in the future.
答案其实很明显，但我没有想清楚。我所要做的就是在每一行之后添加 !important ，因为 bootstrap.css 优先。一旦我添加了 !important 问题就立即解决了。只是想我会添加这个以防将来其他人遇到这个问题。
