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

Question

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

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

我该怎么办？

Answer 1

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

以下是将边界半径应用于引导模式的正确方法：

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

---

注：如果在引导程序css之后加载了自定义css，请删除!important标记。

Answer 2

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

根据getbootstrap.com/javascript/#static-example，你应该风格：

.modal-content

Answer 3

为了覆盖一块CSS，您可以将以下内容添加到自定义CSS文件中，假设此文件在Bootstrap之后加载。

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

Answer 4

我按照上面的答案，我到了一半。经过一番检查后，我意识到我的特定实例同时具有.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;
}

如前面的答案所述，如果您的代码出现在引导代码之前，请使用！important。

Answer 5

我使用以下和成功：

<div class="modal-content" style="background: transparent;">
                      <div class="modal-body" style="border-radius: 10px;">