При использовании Bootstrap моя навигационная панель слишком длинная на мобильном телефоне - PullRequest
Новая
       58

При использовании Bootstrap моя навигационная панель слишком длинная на мобильном телефоне

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

У меня небольшие проблемы с кодом моего сайта https://bjmrq.github.io/foyer.html на ноутбуке все в порядке, но как только я проверяю его на своем мобильном телефоне, навигационная панель кажется слишком длинной!Если кто-нибудь может мне помочь :) (я использую загрузчик 4) Спасибо за ваше время! 

<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-sm fixed-top" style="background-color: #563d7c;">
<a class="navbar-brand navTitle mx-2" href="index.html"><span class="fas fa-camera-retro"></span>&nbsp; Sophie Madonna</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
  <span class="navbar-toggle``r-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
  <ul class="navbar-nav">
    <li class="nav-item mx-2">
      <a class="navbar navTitle nav-link" href="foyer.html"><span class="fab fa-gripfire"></span>&nbsp; Le foyer</a>
    </li>
  </ul>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item mx-2">
      <a href="about.html" class="nav-link">My Story</a>
    </li>
    <li class="nav-item mx-2">
      <a href="contact.html" class="nav-link">Follow Me</a>
    </li>
  </ul>
</div>


.navbar {
font-family: 'Ranga';
color: white;
font-size: 1.3em;
}

.navbar-light .navbar-brand .navbar-nav .nav-link .navTitle .navbar .navbar-dark {
font-family: 'Ranga';
color: white;
font-size: 1.3em;
}

вот моя проблема

1 Ответ

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

Элемент <hr> сразу под первым тегом <h1> имеет установленную ширину width: 500px;, из-за которой остальная часть тела будет сдвинута влево на меньших экранах.

...