Переместите один элемент панели навигации вправо в Bootstrap4 и сохраняйте центрированные ссылки - PullRequest
Новая
       19

Переместите один элемент панели навигации вправо в Bootstrap4 и сохраняйте центрированные ссылки

0 голосов
/ 28 декабря 2018

Я пытаюсь переместить текст и изображение «логин с разногласиями» вправо, в то время как две другие ссылки навигационной панели остаются в центре.Всякий раз, когда я пытался всплыть правильно, центрированные элементы контента / навигации были сдвинуты влево на ширину кнопки «Войти с разногласиями».Я пытаюсь плавать прямо без движения контента центра.Вот мой код. 

<body class="text-center">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
  <header class="masthead mb-auto mr-auto ml-auto">
    <div class="inner">
      <nav class="nav nav-masthead justify-content-center">
        <a class="nav-link active" href="#">Home</a>
        <a class="nav-link" href="features.html">Features</a>
        <a class="nav-link" href="#"><img src="../img/discordnav.png"></img> Login With Discord</a>
      </nav>

    </div>

  </header>

Сайт / ссылка для предварительного просмотра - https://wojakbot -64140.firebaseapp.com /

Ответы [ 2 ]

0 голосов
/ 28 декабря 2018

enter image description here Вы хотите быть таким?

enter image description here код здесь

0 голосов
/ 28 декабря 2018

просто обновите ниже css, и все готово, так как вам нужно сделать эту последнюю дочернюю позицию абсолютной и позицию заголовка относительной, если вы хотите еще больше вправо, то удалите max-width или установите его не установленным для ".cover-container".

a.nav-link:last-child {
    position: absolute;
    right: 0;
}
.masthead {
    position: relative;
    width: 100%;
}
...