如何更改引导模式的边界半径? [英] How to change border radius of bootstrap modal?

问题描述

我无法更改引导模式的边框半径.

.modal{-webkit-border-radius: 0px;-moz-border-radius: 0px;边界半径:0px；}

我该怎么做?

解决方案

BOOTSTRAP 3:

在 Bootstrap 3 中，您需要将边框半径应用于 .modal-content div 元素而不是 .modal div 元素像这样:

.modal-content {-webkit-border-radius: 0px !important;-moz-border-radius: 0px !important;边界半径:0px！重要；}

注意，如果您的自定义 css 是在 引导 css 之后加载的，请删除 !important 标记.

---

引导程序 4 &引导程序 5:

在 Bootstrap 4 &Bootstrap 5，您只需将 rounded-0 类名添加到您的 modal-content 元素(或任何其他元素)将其边框半径设置为 0，如下所示:

<div class="modal-dialog";角色=文档"><div class="modal-content rounded-0"><!-- 您的模态内容在这里-->

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?

解决方案

BOOTSTRAP 3:

In Bootstrap 3, you need to apply the border radius to the .modal-content div element and not the .modal div element like this:

.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 loaded after your bootstrap css.

---

BOOTSTRAP 4 & BOOTSTRAP 5:

In Bootstrap 4 & Bootstrap 5, you can just add the rounded-0 class name to your modal-content element (or to any other element) to set it's border radius to 0 like this:

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-0">
        <!-- Your Modal content here -->
    </div>
  </div>
</div>

这篇关于如何更改引导模式的边界半径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！