css - 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 都是默认的 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;
}