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

问这个问题已经有两年了，我仍然没有看到引导程序的答案，所以就在这里，只需在页眉和页脚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文档here

中有一个使用自定义组件的很好的例子。

Answer 5

尝试一下：

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

检查：https://jsfiddle.net/sugandhnikhil/bz82oadf/ 谢谢!!!!

Answer 6

在 bootstrap 4.5 中：模态页眉和页脚行只是中间的空白行。实际上，模态页眉、页脚和正文没有背景颜色。但是当你改变它时，分隔线会显示为白色，所以我们将颜色应用于 modal-content，就像这样：

.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>

我想从模态主体和页脚中删除水平线吗？

6 个答案: