WedX - журнал о программировании и компьютерных науках

пытаюсь выровнять навигационные ссылки с логотипом в bootstrap 4

У меня возникают проблемы с выравниванием моих навигационных ссылок с моим логотипом. В настоящее время мой логотип находится в центре моей навигации, а ссылки по какой-то причине отображаются над моим логотипом, а не рядом с ним. на изображении ниже показана моя проблемавведите здесь описание изображения

Я пытаюсь сделать так, чтобы это выглядело так:

введите здесь описание изображения

вот мой код заголовка:

  <header id="header" role="banner">
            <div class="header-inner">
                <nav class="navbar">
                    <div class="container text-xs-center">
                        <div class="navbar-nav">
                            <a href='{{ url("/") }}' class="nav-item-link nav-item nav-link">Home</a>
                            <a href="#" class="nav-item-link nav-item nav-link">Our Team</a>
                            <a href="#" class="nav-item-link nav-item nav-link">Media</a>
                            <a href='{{ url("/") }}' class="nav-item nav-link"><img src="./images/zipzap.jpg" class="img-fluid" alt=""></a>
                            <a href="#" class="nav-item-link nav-item nav-link">About Us</a>
                            <a href='{{ url("/contact") }}' class="nav-item-link nav-item nav-link">Contact Us</a>
                            <a href='{{ url("/donate") }}' class="nav-item-link nav-item nav-link" id="donate">Support Us</a>
                        </div>
                    </div>
                </nav>
            </div>
        </header>

и мой css:

a.nav-item{
    color:#000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:bold;
    padding:20px;
}

a.nav-item:hover{
    color:#000;
}

a.nav-item:hover{
    color:#000;
}

.navbar-nav{
    display:inline-block;
}

#donate{
    background-color: #7ED321;
    border-radius: 8px;
    padding: 15px;
}

#header{
    width:100%;
}

.header-inner{
    padding: 18px 0;
    width:100%;
}

любая помощь будет оценена!


Ответы:


1

стараться сделать

a.nav-item{
    color:#000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:bold;
    padding:20px;
    vertical-align:center;
}

Если это не сработает, попробуйте добавить свойство line-height, чтобы получить желаемое вертикальное положение.

08.07.2016
  • Спасибо! Работает, но почему-то зеленый фон вокруг моей кнопки поддержки растягивается. Знаете ли вы, есть ли способ сделать это, не затрагивая фон вокруг этой кнопки? 08.07.2016
  • Если это сработало, не могли бы вы пометить ответ как принятый. Спасибо. Что касается зеленой растяжки, попробуйте задать для нее высоту. 08.07.2016
  • Растяжение связано с дополнением, которое вы предложили по ссылке. В этом случае я бы использовал высоту строки, чтобы не было растяжения. 08.07.2016
  • Новые материалы

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


    Для любых предложений по сайту: [email protected]