Bootstrap nav-bar не отображает контент за пределами его ширины - PullRequest
Новая
       3

Bootstrap nav-bar не отображает контент за пределами его ширины

0 голосов
/ 13 октября 2018 

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

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

enter image description here

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...