Панель навигации Bootstrap не отображает содержимое за пределами своей ширины

@font-face {
  font-family: Pipboy;
  src: url('../monofonto.ttf');
}

.navbar {
  border-bottom: 2px solid;
  margin: 0px 10px;
  color: #14fe17;
}

.nav-item.active {
  position: relative;
}

.nav-item.active::before {
  content: "";
  position: absolute;
  background: #f00;
  width: 100%;
  height: 20px;
}

.navbar::before,
.navbar::after {
  height: 6px;
  width: 3px;
  content: "";
  position: absolute;
  display: block;
  z-index: 5000;
  bottom: -6px;
  background: #14fe17;
}

.navbar::before {
  left: 0px
}

.navbar::after {
  right: 0px;
}

.navbar-nav {
  width: 100%;
}

body {
  font-family: Pipboy, sans-serif;
  background-color: #151811;
  font-size: 1.5rem;
}

body::after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 2px);
  z-index: 100000000;
  pointer-events: none;
}

h2 {
  margin-top: 20px;
  margin-left: 20px;
  color: #14fe17;
}

.center-image img {
  margin: auto;
  margin-top: 100px;
  display: block;
  position: relative;
  max-height: 600px;
  max-width: 300px;
  filter: grayscale(1) sepia(100%) hue-rotate(55deg) saturate(7) brightness(1) contrast(2);
}

ul.navbar-nav>li.nav-item>a.nav-link,
ul.nav>li.nav-item>a.nav-link,
div.tab-content {
  color: #14fe17 !important;
}

<!DOCTYPE html>
<html>

<head>

  <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel = "stylesheet" href = "style.css">


  <title>
    Hercules Strydom
  </title>
</head>

<body>
  <h2>
    Hercules Strydom
  </h2>


  <nav class = "navbar navbar-expand-lg navbar-dark">
    <div class = "collapse navbar-collapse" id = "mainNav">
      <ul class = "navbar-nav nav-fill">
        <li class = "nav-item active ">
          <a class = "nav-link" href = "#">Home <span class = "sr-only">(current)</span></a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link" href = "#">Timeline</a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link" href = "#">Portfolio</a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link " href = "#">Travel</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class = "container">
    <div class = "row">
      <div class = "col-12">

        <!-- Nav tabs -->
        <ul class = "nav nav-tabs" id = "myTab" role = "tablist">
          <li class = "nav-item">
            <a class = "nav-link active" id = "home-tab" data-toggle = "tab" href = "#home" role = "tab" aria-controls = "home" aria-selected = "true">
                  STATUS
                </a>
          </li>
          <li class = "nav-item">
            <a class = "nav-link" id = "profile-tab" data-toggle = "tab" href = "#profile" role = "tab" aria-controls = "profile" aria-selected = "false">
                  SPECIAL
                </a>
          </li>
          <li class = "nav-item">
            <a class = "nav-link" id = "messages-tab" data-toggle = "tab" href = "#messages" role = "tab" aria-controls = "messages" aria-selected = "false">
                  PERKS
                </a>
          </li>
        </ul>

        <!-- Tab panes -->
        <div class = "tab-content">
          <div class = "tab-pane fade show active" id = "home" role = "tabpanel" aria-labelledby = "home-tab">
            status
          </div>
          <div class = "tab-pane fade" id = "profile" role = "tabpanel" aria-labelledby = "profile-tab">
            special
          </div>
          <div class = "tab-pane fade" id = "messages" role = "tabpanel" aria-labelledby = "messages-tab">
            perks
          </div>
        </div>

      </div>
    </div>
  </div>


  <div class = "center-image">
    <img src = "vb.png">
  </div>


</body>


<script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>





</html>

@font-face{

  font-family: Pipboy;
  src: url('../monofonto.ttf');

}

.navbar{

  border-bottom: 2px solid;
  margin: 0px 10px;
  color: #14fe17;

}

.nav-item.active{
  position: relative;
}

.nav-item.active::before{

  content: "";
  position: absolute;
  background: #f00;
  width: 100%;
  height: 20px;
}


.navbar::before, .navbar::after{
  height:6px;
  width:3px;
  content: "";
  position: absolute;
  display: block;
  z-index: 5000;
  bottom:-6px;
  background: #14fe17;


}

.navbar::before{
  left:0px

}

.navbar::after{
  right:0px;

}

.navbar-nav{
  width: 100%;

}



body{

    font-family: Pipboy, sans-serif;
    background-color: #151811;
    font-size: 1.5rem ;
}

body::after{
  width: 100%;
  height:100%;
  content: "";
  position: absolute;
  top:0px;
  left: 0px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 1px, transparent 1px, transparent 2px );
  z-index: 100000000;
  pointer-events:none;
}

h2{
  margin-top: 20px;
  margin-left: 20px;
  color: #14fe17;
}

.center-image img{
  margin: auto;
  margin-top: 100px;
  display: block;
  position: relative;
  max-height: 600px;
  max-width: 300px;
  filter: grayscale(1) sepia(100%) hue-rotate(55deg) saturate(7) brightness(1) contrast(2);


}

 ul.navbar-nav > li.nav-item > a.nav-link ,
 ul.nav > li.nav-item > a.nav-link, div.tab-content{
    color: #14fe17 !important;
}

<!DOCTYPE html>
  <html>
    <head>

      <link rel= "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "css/style.css">


      <title>
        Hercules Strydom
      </title>
    </head>

    <body>  
      <h2>
        Hercules Strydom
      </h2>


      <nav class = "navbar navbar-expand-lg navbar-dark">
        <div class = "collapse navbar-collapse" id = "mainNav">
          <ul class = "navbar-nav nav-fill">
            <li class = "nav-item active ">
              <a class = "nav-link" href = "#">Home <span class = "sr-only">(current)</span></a>
            </li>
            <li class = "nav-item">
              <a class = "nav-link" href = "#">Timeline</a>
            </li>
            <li class = "nav-item">
              <a class = "nav-link" href = "#">Portfolio</a>
            </li>
            <li class = "nav-item">
              <a class = "nav-link " href = "#">Travel</a>
            </li>
          </ul>
        </div>
      </nav>

      <div class= "container">
        <div class = "row">
          <div class = "col-12">

            <!-- Nav tabs -->
            <ul class = "nav nav-tabs" id = "myTab" role = "tablist">
              <li class = "nav-item">
                <a class = "nav-link active" id = "home-tab" data-toggle = "tab" href = "#home" role = "tab" aria-controls = "home" aria-selected = "true">
                  STATUS
                </a>
              </li>
              <li class = "nav-item">
                <a class = "nav-link" id = "profile-tab" data-toggle = "tab" href = "#profile" role = "tab" aria-controls = "profile" aria-selected = "false">
                  SPECIAL
                </a>
              </li>
              <li class = "nav-item">
                <a class = "nav-link" id = "messages-tab" data-toggle = "tab" href = "#messages" role = "tab" aria-controls = "messages" aria-selected = "false">
                  PERKS
                </a>
              </li>
            </ul>

            <!-- Tab panes -->
            <div class = "tab-content">
              <div class = "tab-pane fade show active" id = "home" role = "tabpanel" aria-labelledby = "home-tab">
                status
              </div>
              <div class = "tab-pane fade" id = "profile" role = "tabpanel" aria-labelledby = "profile-tab">
                special
              </div>
              <div class = "tab-pane fade" id = "messages" role = "tabpanel" aria-labelledby = "messages-tab">
                perks
              </div>
            </div>

          </div>
        </div>
      </div>


      <div class= "center-image">
        <img src = "vb.png">
      </div>


      </body>


    <script src= "https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src= "js/main.js"></script>




  </html>

Я пытаюсь создать свою личную веб-страницу в стиле Fallout 4. Я столкнулся с ошибкой, из-за которой я хочу отредактировать строки на ::before и ::after под панелью навигации, чтобы они больше походили на пипбоя. Красный цвет, который вы видите на картинке, - это то, что я пытаюсь отладить, почему nav-item active начинается на полпути через первый элемент (Home) и простирается до конца страницы. Разве это не должна быть просто длина активного элемента? Я разместил свой код по этой проблеме ниже.

Любой совет приветствуется!

Панель навигации Bootstrap не отображает содержимое за пределами своей ширины

.nav-item.active::before{

  content: "";
  position: absolute;
  background: #f00;
  width: 100%;
  height: 20px;
}

  <nav class = "navbar navbar-expand-lg navbar-dark">
        <div class = "collapse navbar-collapse" id = "mainNav">
          <ul class = "navbar-nav nav-fill">
            <li class = "nav-item active ">
              <a class = "nav-link" href = "#">Home <span class = "sr-only">(current)</span></a>
            </li>
            <li class = "nav-item">
              <a class = "nav-link" href = "#">Timeline</a>
            </li>
            <li class = "nav-item">
              <a class = "nav-link" href = "#">Portfolio</a>
            </li>
            <li class = "nav-item">
              <a class = "nav-link " href = "#">Travel</a>
            </li>
          </ul>
        </div>
      </nav>

добавить позицию: относительно элемента

— 13.10.2018 01:04

Я перепробовал все позиции, и все они ничего не отображают, кроме как при использовании абсолютного положения. @TemaniAfif

— 13.10.2018 01:15

Я имел в виду позицию: относительно элемента, а не псевдоэлемент .nav-item.active{position:relative}

— 13.10.2018 01:31

Я попробовал это и получил красную полосу от середины активного элемента (Home) до середины второго элемента (Timeline). Я думаю, что где-то есть поле, которое смещает его вправо, потому что это правильный размер, а не правильная позиция @TemaniAfif

— 13.10.2018 20:56

попробуйте отредактировать свой код, чтобы включить все, чтобы мы могли воспроизвести проблему, как изображение

— 13.10.2018 21:06

Я обновил код. Большое спасибо! Уже неделю пытаюсь это решить. @TemaniAfif

— 15.10.2018 21:48

похоже, вам просто не хватает left: 0; на псевдоэлементе

— 16.10.2018 02:34

Вы, сэр, легенда. Большое спасибо за потраченное время и усилия! @TemaniAfif

— 16.10.2018 02:50

html css bootstrap-4

13.10.2018 01:02

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Другие вопросы по теме

Пожалуйста, я пытался подключить свой проект к базе данных, но у меня возникла ошибка: имя «текстовое поле» не существует в текущем контексте

CSS3-анимации не синхронизируются в IE / Edge

Встроенный блок не дает желаемого эффекта

Как скрыть div, если он не содержит значения с помощью jquery

Стиль таблицы стилей не применяется к одному конкретному

Входной файл с btn-outline при загрузке

Вертикальный линейный градиент

Удаление или сброс правила высокой специфичности из таблицы стилей, контролируемой поставщиком

Как масштабировать размер шрифта <div> текста в зависимости от количества символов?

Карусель Bootstrap заполняет всю мою страницу

Панель навигации Bootstrap не отображает содержимое за пределами своей ширины

Другие вопросы по теме

Похожие вопросы