В Bootstrap 4, как убрать разрыв между навигационной панелью и пунктом меню переключения? - PullRequest
Новая
       7

В Bootstrap 4, как убрать разрыв между навигационной панелью и пунктом меню переключения?

0 голосов
/ 26 апреля 2018

С Bootstrap 4 появляется стандартный шаблон панели навигации. Я использовал это для обучения, но когда я пытаюсь изменить или стилизовать CSS, я схожу с ума. Я не понимаю, в чем причина разрыва между навигационной панелью и пунктом меню?

Я пытаюсь устранить пробел, Но трудно достичь того, что я ищу. Вот изображение: Gap-img 

<html>

<head> </head>

<body>
  <nav class="navbar navbar-expand-md navbar-inverse navbar-fixed-top" role = "navigation">
    <div class="navbar-header">   
<a class="navbar-brand" href="#">
    <img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/Boostrap_logo.svg" width="22" height="22" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!--         <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-x"> -->
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="nav-item"><a href="#">Home</a></li>
        <li class="nav-item"><a href="#">About</a></li>
        <li class="dropdown-divider"></li>
        <li class="nav-item"><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>

  <section>
    <div class="container">
      <div id="about">
        <h1>My title</h1>
        <p>Hello World. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium error tempore voluptas iusto. Deleniti impedit repellendus mollitia ad, repudiandae ab fugit ipsa in laboriosam culpa, aspernatur amet quo modi possimus.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ea assumenda, soluta natus culpa debitis perspiciatis repudiandae doloremque eum repellendus fugiat corrupti aspernatur accusamus neque laborum totam voluptates error possimus.</p>
      </div>
    </div>
  </section>

</body>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</html>`




.navbar-collapse {
  border: 0;
  -webkit-box-shadow: none;
}

.nav-item{
   height:49px;
      margin-top: 0px;
      margin-bottom: 0px;
        padding-top:0px;
        padding-bottom:0px;
}

/*  */
.navbar-default,
.navbar-inverse {
  /* SET color for top bar*/
  background-color: darkblue;
  margin-bottom:20px;
}

.navbar-toggle {
  border: 0px;
  border-radius: 0px;
  padding: 18px;
  margin: 0px;
  background-color: rgba(0, 0,200, 0.5);
  outline: none;
}

.navbar-toggle .icon-bar:nth-of-type(1) {
  height: 2px;
  top: 1px;
}
.navbar-toggle .icon-bar:nth-of-type(2) {
  height: 2px;
  top: 0.9px;
}
.navbar-toggle .icon-bar:nth-of-type(3) {
  height: 2px;
  top: 0.7px;
}

Кто-нибудь может мне помочь?

1 Ответ

0 голосов
/ 26 апреля 2018

Я посмотрел на ваш Codepen, и кажется, что ваш ul имеет top и bottom margin 7.5px, поместите правило ниже в ваш код, и он удалит Это. Второе значение ( left и right margin) будет держать размер достаточно долго, поэтому при наведении указателя изменяется цвет фона всей области, а не только ее части. Если вы не понимаете, что я имею в виду, попробуйте указать разницу в 0 для всех сторон.

CSS 

.navbar-nav {
  margin: 0px -15px;
}
...