Удалить пробелы начальной загрузки под навигационной панелью-nav

#css #twitter-bootstrap

Вопрос:

Я пытаюсь удалить пробелы начальной загрузки между моим меню и следующим разделом. Мой HTML-код меню выглядит следующим образом:

     <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <ul class="navbar-brand">
                    <li><a href="/"><img src="{% static 'img/apps-png.png' %}" width="150px" alt="appsrfun logo" /></a></li>
                </ul>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                  <li><a href="{% url 'home' %}">Home</a></li>
                  <li><a href="{% url 'home' %}">Mobile Apps</a></li>
                  <li><a href="{% url 'home' %}">Android</a></li>
                  <li><a href="{% url 'home' %}">Apple</a></li>
                  <li><a href="{% url 'home' %}">Download</a></li>
                  <li><a href="{% url 'home' %}">Tags</a></li>
                </ul>
            </div>
        </div><!-- .container -->
    </nav>

Если я проверю каждый элемент, нижняя граница, отступы и поля будут установлены в 0 пикселей. Между концом <div class="collapse navbar-collapse" id="myNavbar"> и концом есть таинственное пустое пространство <ul class="nav navbar-nav"> . Первый имеет высоту 106 пикселей, в то время как второй показывает 100 пикселей, но ни один из них не имеет границ, полей или отступов. Как мне выровнять их?

Спасибо

Редактировать

Я включил свой CSS, чтобы удалить стандартные поля начальной загрузки и отступы

 /* Navbar */
.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

.navbar .nav > li > a:link, .navbar .nav > li > a:visited {
    color: #f7931e;
    height: 100px;
    padding-top: 40px;
    margin-bottom: 0px;
}

.navbar .nav > li > a:hover, .navbar .nav > li > a:active {
    background-color: #f7931e;
    color: #ffffff;
    border-bottom: 6px solid #ffff01;
}

.navbar {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.navbar-brand {
    list-style-type: none;
    margin-bottom: 0px;
}

.navbar-default {
    background-color: transparent;
}

1. У вас есть нижний край 20 пикселей в теге <nav> и нижний край 10 пикселей в <ul> с классом ‘navbar-brand’ .

2. @VasilIndzhev Я добавил свой CSS, чтобы показать, что я рассмотрел это

3. У вас есть . оберните или .wrap>.container в вашем css?

Ответ №1:

Вероятно, это связано с выравниванием по вертикали. попробуйте установить выравнивание по вертикали: по центру .navbar .navbar-nav.

Редактировать: Обычно это происходит, когда у вас есть элементы с разными значениями выравнивания по вертикали. Я не знаю, что такое CSS для остальной части вашего кода, но, имея elementA с vertical-align:middle и ElementB vertical-align:baseline .

Пример:

 .container{min-height:80px;width:100%;background:#333;}
.box1{background:#eee;width:40px;height:40px;display:inline-block;vertical-align:middle;}
.box2{background:red;width:100px;height:100px;display:inline-block;}

 <div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

Установка vertical-align:middle на .box2 устранит проблему.