如何从模态主体和页脚中删除水平线?

Question

我想从我的模态中删除水平线

$(document).ready(function(){
$('#myModal').modal('show');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

如您所见，内容上方和下方有一行

Answer 1

这个问题被问到已经 2 年了，我仍然没有看到任何引导的答案，所以在这里，只需在页眉和页脚div 中使用 border-0 类。这应该可以解决问题。

<div class="modal-header border-0">
....
</div>
<div class="modal-footer border-0">
....
</div>

Answer 2

我想你说的是应用于模态的边框。使用以下代码。

.modal-header {
border-bottom: 0 none;
}
.modal-footer {
border-top: 0 none;
}

Answer 3

试试这个...

.no-border{
border:none;
}

并简单地添加到您的班级

<div class="modal-header no-border">

Answer 4

为了删除这些边框，我发现传入自定义标题组件或字符串是最容易的。

如果您只想完全删除标题，请在道具上设置title={null}。然后标题及其底部边框将不会显示。请注意，这不会删除关闭的"X"图标。

页脚也是如此。将footer={null}作为道具传递以将其完全删除(包括按钮(。如果您仍想在页脚中显示一些内容，这里有一个在 Ant 文档中使用自定义组件的很好的例子

Answer 5

在引导 4.5 中：模态页眉和页脚行只是介于两者之间的空白区域。 实际上，模态页眉、页脚和正文没有背景颜色。 但是当你改变它时，分隔线会显示白色，所以我们把颜色应用于模态内容，就像这样：

.modal-content
background-color: red// this will hide the white separators

在某些引导版本中： 只需添加

.modal-footer
border: 0
.modal-header
border: 0

$(document).ready(function(){
$('#myModal').modal('show');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="background-color:red;border: 0;">
<div class="modal-header" style="border: 0;">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer" style="border: 0;">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Answer 6

试试这个：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style='border: none;'>
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer" style='border: none;'>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

check：https：//jsfiddle.net/sugandhnikhil/bz82oadf/谢谢！！！！

Answer 7

这对我有帮助：

.modal-header {
border: none !important;
}
.modal-footer {
border: none !important;
}