css - 如何自定义 MDBootstrap 模态的边框半径

Question

我正在使用 MDBootstrap在我的元素中，无法自定义 MDBootstrap 模态的边框半径。

我想为我的模态制作 border-radius: 0。

我的 html 代码:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#basicExample" id="modalBtn">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade right" id="basicExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-full-height modal-right" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
            </div>
            <!--Body-->
            <div class="modal-body">
                ...
            </div>
            <!--Footer-->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!-- Modal -->

我试过:

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

但它不能正常工作。 我附上图片，以便您可以理解。

我也试过:

.modal{
    border-radius: 25% !important;
}

但它是这样工作的:

Answer 1

你定位错误的选择器而不是你应该使用下面的代码来重置模态边框

.modal-content{
      border-radius: 0;
}