Bootstrap 4 - Модальный заголовок с вкладками - Как уменьшить высоту заголовка

Question

Я работаю в Bootstrap 4 и создал модальное диалоговое окно с вкладками.У меня проблема в модальном заголовке с высотой вкладок, мне нужно его уменьшить.Вот как это выглядит сейчас:

Заголовок - высокий

Вот как бы я хотел, чтобы он выглядел:

Заголовок - обычный

Вот мой код начальной загрузки:

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