Html 如何更改引导模式的边界半径？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29479233/
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
How to change border radius of bootstrap modal?
提问by Hikaru Shindo
I am unable to change the border radius of bootstrap modal.
我无法更改引导模式的边框半径。
.modal{
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
How should I do it?
我该怎么做？
回答by AndrewL64
You need to apply the border radius to the .modal-contentdiv and not the .modaldiv.
您需要将边框半径应用于.modal-contentdiv 而不是.modaldiv。
Here is the right way to apply border radius to your bootstrap modal:
这是将边框半径应用于引导模式的正确方法：
.modal-content {
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
N.B.Remove the !importanttags if your custom css is loaded afteryour bootstrap css.
注意!important如果您的自定义 css在您的引导 css之后加载，请删除标签。
回答by designarti
Maybe you're trying to style the wrong element.
也许您正在尝试为错误的元素设置样式。
According to getbootstrap.com/javascript/#static-example, you should style:
根据getbootstrap.com/javascript/#static-example，您应该设置样式：
.modal-content
回答by wet_waffle
You can just use rounded-0bootstrap class.
您可以只使用rounded-0引导程序类。
<div class="modal-content rounded-0">
</div>
回答by herry swastika
I use the following and success :
我使用以下并成功：
<div class="modal-content" style="background: transparent;">
<div class="modal-body" style="border-radius: 10px;">
回答by Hamfri
In Bootstrap 4Try the following:
在Bootstrap 4 中尝试以下操作：
.modal-content {
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
-webkit-border: 0px !important;
-moz-border: 0px !important;
border: 0px !important;
}
border-radiusremoves the rounded corners while borderremoves all borders (left, right, top, bottom) around the modal.
border-radius移除圆角，而border移除模态周围的所有边框（左、右、上、下）。
回答by Teknotica
In order to overwrite a piece of CSS you could add the following to your custom CSS file, assuming this file loads after Bootstrap.
为了覆盖一段 CSS，您可以将以下内容添加到您的自定义 CSS 文件中，假设该文件在 Bootstrap 之后加载。
.modal{
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
回答by Kiky Rodriguez
I followed the answers above and I got halfway there. After some inspection I realized that my particular instance had both a .modal-content portion as well as a .modal-dialog portion. So be careful that you don't have two borders on the same modal pop-up. After I removed the .modal-dialog border and adjusted the .modal-content, my modals look super slick!
我按照上面的答案进行了操作，并成功了一半。经过一些检查，我意识到我的特定实例既有 .modal-content 部分，也有 .modal-dialog 部分。所以要小心，不要在同一个模态弹出窗口上有两个边框。在我移除 .modal-dialog 边框并调整了 .modal-content 之后，我的模态看起来非常漂亮！
.modal-content {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.modal-dialog {
border: 0px !important;
}
As the previous answers state, use the !important if your code appears before the bootstrap code.
正如前面的答案所述，如果您的代码出现在引导程序代码之前，请使用 !important。
