HTML и CSS заполнить все DIV - PullRequest
Новая
       50

HTML и CSS заполнить все DIV

1 голос
/ 14 апреля 2020

У меня есть эта навигационная панель со значком: введите описание изображения здесь

значки находятся в центре DIV, но я хочу заполнить все DIV, а затем не должно быть пробелов слева и справа.

DIV, в котором он находится: введите описание изображения здесь

мое приложение REACT, и я также использую bootstrap. Я попытался добавить поля слева: 0 и поля справа и справа: 0, но это не сработало.

это код HTML 

<nav class="navbar navbar-expand navbar-light bg-light fixed-bottom" style="padding-top: 0px; padding-bottom: 0px; width: 100%;">
   <div class="bottom-nav navbar-nav" style="height: 100%; margin: 0px auto;">
      <a href="#law" data-rb-event-key="#law" class="nav-icon fa-2x nav-link">
        ICON
      </a>
      <a href="#bar" data-rb-event-key="#bar" class="nav-icon fa-2x nav-link">
         ICON
      </a>
   </div>
</nav>

не забывайте, что я используйте bootstrap, спасибо.

Вы можете мне помочь? Спасибо

1 Ответ

1 голос
/ 14 апреля 2020

Просто добавьте пользовательский класс и укажите ширину вашей навигации. Ваша навигация имеет display: flex;. Таким образом, вы можете использовать justify-content: space-between; для распространения ваших иконок: 

.custom-nav {
  justify-content: space-between;
  width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand navbar-light bg-light fixed-bottom" style="padding-top: 0px; padding-bottom: 0px; width: 100%;">
  <div class="bottom-nav navbar-nav custom-nav" style="height: 100%; margin: 0px auto;">
    <a href="#law" data-rb-event-key="#law" class="nav-icon fa-2x nav-link">
      <i class="fas fa-star"></i>
    </a>
    <a href="#bar" data-rb-event-key="#bar" class="nav-icon fa-2x nav-link">
      <i class="fas fa-glass-cheers"></i>
    </a>
    <a href="#restaurant" data-rb-event-key="#restaurant" class="nav-icon fa-2x nav-link">
      <i class="fas fa-utensils"></i>
    </a>
    <a href="#store" data-rb-event-key="#store" class="nav-icon fa-2x nav-link">
      <i class="fas fa-store"></i>
    </a>
  </div>
</nav>
...