如何更改bootstrap模式的边界半径？

I am unable to change the border radius of bootstrap modal.

我无法更改bootstrap模式的边界半径。

.modal{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px; 
}

How should I do it?

我该怎么办？

4 个解决方案

#1

You need to apply the radius to the .modal-content div and not the .modal div.

您需要将半径应用于.modal-content div而不是.modal div。

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 !important tags if your custom css is below your bootstrap css.

注：如果你的自定义css低于你的bootstrap css，请删除！important标签。

#2

Maybe you're trying to style the wrong element.

也许你正试图塑造错误的元素。

According to http://getbootstrap.com/javascript/#static-example, you should style

根据http://getbootstrap.com/javascript/#static-example，你应该设计风格

.modal-content

#3

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; 
}

#4

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对话框边框并调整.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。

#1