Bootstrap 4 проблема липкого нижнего колонтитула

Question

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

На самом деле мой нижний колонтитул выглядит так для настольной версии моего веб-сайта :

элементы нижнего колонтитула отображаются в строке без каких-либо проблем ...

Но если я изменю разрешение страницы, пока я Достигните мобильного дизайна этого, мои элементы нижнего колонтитула накладываются друг на друга вместо того, чтобы оставаться в линии:

Я пытался исправить это, чтобы использовать медиа-запросы и css, чтобы добавить display : inline-block в список html, но он не сработал, и я не знаю, что мне следует использовать, чтобы правильно его отображать.

Здесь кодовое обозначение нижнего колонтитула: https://codepen.io/rgmislife/pen/poJJeyV

.footer-page {
  background-color: #d2d7e8;
  right: 0;
  bottom: 0;
  left: 0;
  /**position:absolute;**/
  position: relative;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {
  .footer-page {
    position: relative;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .footer-page {
    position: absolute;
  }
}

.navbar-brand {
  font-family: 'Raleway', regular;
  color: white;
  font-size: 15px;
  letter-spacing: 1px;
}

.icon {
  font-size: 0.4rem;
}

.nav-link {
  font-family: 'Raleway', Semi-Bold;
  letter-spacing: 1px;
  color: #3a5199;
  font-size: 15px;
  letter-spacing: 1px;
  no
}

<link href="//use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
  <div class="footer-page">
    <nav class="navbar navbar-fixed-bottom navbar-expand-md bg-faded justify-content-center">
      <a href="index.html" class="navbar-brand d-flex w-50 mr-auto">Brand</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#"><i class="fab fa-linkedin fa-2x"></i></a>
          </li>
          <li class="nav-item d-inline-block">
            <a class="nav-link" href="nous-contacter.php"><i class="fas fa-envelope fa-2x"></i></a>
          </li>
        </ul>
        <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
          <li class="nav-item">
            <a class="nav-link" href="nous-contacter.php">Nous contacter</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="mentions.html">Mentions Légales</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="CGV.html">CGV</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="presse.html">Presse</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="evenements.html">Evénements</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</footer>

и вот код css, который я попробовал:

.nav li {display: inline-block;}

Если у кого-то есть идея, не стесняйтесь, дайте мне знать. Спасибо.

Answer 1

Ваши ссылки сложены, потому что они не помещаются в контейнер. Вы ничего не можете сделать без изменения структуры html. И я предлагаю вам организовать макет еще. Теперь это выглядит довольно грязно.

Быстрое исправление , просто чтобы посмотреть, что можно сделать (я вижу, что вы используете bootstrap, поэтому я основываюсь на этом):

• удалить w-50 из navbar-brand ссылки. Это основная причина наложения ссылок.
• Теперь вы хотите, чтобы ваши значки были в центре, и, насколько я понимаю, вы хотите, чтобы они были внутри navbar-collapse вместе со ссылками. Так что удалите ml-auto w-100 из ul navbar-nav, где находятся ссылки. Добавьте mx-auto к ul, где значки, они делают их в центре между brand и ссылками.

Просмотр фрагмента в режиме полной страницы.

.footer-page {
  background-color: #d2d7e8;
  right: 0;
  bottom: 0;
  left: 0;
  /**position:absolute;*/
  position: relative;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {
  .footer-page {
    position: relative;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .footer-page {
    position: absolute;
  }
}

.navbar-brand {
  font-family: 'Raleway', regular;
  color: white;
  font-size: 15px;
  letter-spacing: 1px;
}

.icon {
  font-size: 0.4rem;
}

.nav-link {
  font-family: 'Raleway', Semi-Bold;
  letter-spacing: 1px;
  color: #3a5199;
  font-size: 15px;
  letter-spacing: 1px;
}

<link href="//use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
  <div class="footer-page">
    <nav class="navbar navbar-fixed-bottom navbar-expand-md bg-faded justify-content-center">
      <a href="index.html" class="navbar-brand d-flex mr-auto">Brand</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#"><i class="fab fa-linkedin fa-2x"></i></a>
          </li>
          <li class="nav-item d-inline-block">
            <a class="nav-link" href="nous-contacter.php"><i class="fas fa-envelope fa-2x"></i></a>
          </li>
        </ul>
        <ul class="nav navbar-nav justify-content-end">
          <li class="nav-item">
            <a class="nav-link" href="nous-contacter.php">Nous contacter</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="mentions.html">Mentions Légales</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="CGV.html">CGV</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="presse.html">Presse</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="evenements.html">Evénements</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</footer>

Answer 2

Это то, что вы ищете?

@media screen and (max-width:768px){
  .navbar-nav{
    flex-direction: row;
  }
  .navbar-nav .nav-item{
    margin: 0 10px;
  }
}

Ваши элементы будут складываться на мобильных устройствах независимо от длины текста и размеров экрана