Bootstrap 4-带选项卡的模式标题-如何减少标题高度

Question

我正在使用Bootstrap 4，并且创建了带有选项卡的模式对话框。我遇到的问题是具有Tabs高度的Modal Header，我需要减少它。这是现在的样子：

页眉-高

这就是我想要的样子：

标题-正常

这是我的Bootstrap代码：

<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" 
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="tabbable">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item active">
                            <a class="nav-link active" href="#AAA" data-toggle="tab">
                                AAA
                            </a>
                        </li>
                        <li>
                            <a class="nav-link" href="#BBB" data-toggle="tab">
                                BBB
                            </a>
                        </li>
                        <li>
                            <a class="nav-link" href="#CCC" data-toggle="tab">
                                CCC
                            </a>
                        </li>
                    </ul>
                </div>       
            </div>
        </div>
    </div>
</div>

这是我的自定义CSS，所有其他CSS是Default Bootstrap 4：

.modal-header {
    background: #4a4a4a;
    padding: 0;
}

.tabs-top {
    margin-bottom: 1px;
    margin-top: 1px;
}

.nav-tabs {
    border: 0;
}

.tabs-4 .nav-tabs > li {
    width: 25%;
    border: 0;
}

.nav-tabs > li > a {
    width: 100%;
    border: 0;
    background: #4a4a4a;
    color: #fff;
    border-radius: 0;
    text-align: center;
}

.nav-tabs > li > a:hover, 
.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus {
    border: 0;
    background: #4a4a4a;
    color: #ffd800;
}

.nav-tabs > li.active > a {
    border: 0;
    background: #4a4a4a;
    color: #fff;
}

.nav-tabs > li.active > a.active {
    border: 0;
    background: #4a4a4a;
    color: #ffd800;
}

.nav-item {
    vertical-align:top;
}

Answer 1

您可以尝试减少.modal-header的填充

.modal-header {
  padding: 0;
}

默认情况下，Bootstrap 4将其设置为1rem（下面，直接从BS css文件复制）：

.modal-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}