Bootstrap 4 удалить / игнорировать родительский отступ - PullRequest
0 голосов
/ 04 ноября 2018

Я пытаюсь выяснить, как удалить верхний и нижний отступы из элемента ul , чтобы на него не влияло заполнение -nav- , которое по умолчанию установлено в 8px. Вот код:

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a href="#" class="navbar-brand ">Welcome Brand</a>
        <form action="search.php" class="form-inline ml-auto" method="post">
          <div class="input-group">
            <input class="form-control input-group-sm" type="text" name="searchTerm" placeholder="Search..." aria-label="Search...">
            <div class="input-group-append">
              <input class="btn btn-outline-info btn-sm" type="submit" value="Search">
            </div>
          </div>
        </form>
          <ul class="navbar-nav ml-2">
            <li class="nav-item mr-2"><a href="#" class="nav-link btn-outline-info">Browse Movies</a></li>
            <li class="nav-item"><a href="#" class="nav-link btn-outline-info">Sign in</a></li>
          </ul>
    </nav>
  </body>  

Я хочу, чтобы тег -ul- имел отступ 0px, в то время как остальные остаются на 8px.

1 Ответ

0 голосов
/ 05 ноября 2018

Правило CSS Bootstrap ".py-0" может быть добавлено к вашему элементу "ul", чтобы удалить любые верхние и нижние отступы. Однако это не изменит отступ «nav». Если вы хотите расширить область заполнения элемента nav, один из подходов - применить отрицательные верхние и нижние поля к вашим элементам li:

<ul class="navbar-nav ml-2 py-0">
   <li class="nav-item mr-2" style="margin-top: -8px; margin-bottom: -8px;">
       <a href="#" class="nav-link btn-outline-info">Browse Movies</a>
   </li>
   <li class="nav-item" style="margin: -8px 0;">
       <a href="#" class="nav-link btn-outline-info">Sign in</a>
   </li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...