Почему пункты меню начальной загрузки 4 не занимают всю ширину моего вертикального меню? - PullRequest
Новая
       3

Почему пункты меню начальной загрузки 4 не занимают всю ширину моего вертикального меню?

0 голосов
/ 20 декабря 2018

У меня проблема с меню, которое я пытаюсь создать.Я вроде как получил старый бутстрап, но вся эта штуковина смущает меня.Итак, я хочу иметь темное вертикальное боковое меню на 80 пикселей, а остальная часть экрана должна быть «рабочей областью».Моя проблема в том, что пункты в боковом меню не имеют полной ширины (см. Границы ниже), и я не могу понять, почему нет.Я предполагаю прямо сейчас, что это как-то связано с flexbox - предмет, занимающий только необходимое место.Я скопировал код с сайта начальной загрузки и немного изменил.Но последний бит, где я могу получить полную ширину предметов - тот, который мне не хватает. 

.nav-item{
color:#FEFEFE!important;
border-bottom:1px solid #666;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>Ticket</title>
</head>

<body>
  <div class="container-fluid" style="height:100%">
    <div class="row" style="height:100%">
      <div class="col-sm-2 col-md-2 col-lg-1 col-xl-1" style="padding:0px!important;height:100%">
        <nav class="navbar navbar-expand-sm px-0 flex-row " style="background-color:#333;height:100%;">
          <div class="navbar-collapse collapse" id="navbarWEX">
            <div class="nav flex-column">
              <a routerLink="/" class="nav-item">Home</a>
              <a routerLink="/first" class="nav-item">First Item</a>
              <a routerLink="/second" class="nav-item">Second Item</a>
            </div>
          </div>
        </nav>
      </div>
      <div class="col py-2">

        <h2>Hello There</h2>
        <p>Test test test test test test test</p>

      </div>
    </div>
  </div>
  <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
</body>

</html>

1 Ответ

0 голосов
/ 20 декабря 2018

Это не связано с вашим .nav-item, это потому, что .nav не занимает всю ширину своего родителя.Попробуйте обновить boottrap до 4.1 и вставьте .flex-fill в nav: 

.nav-item{
color:#FEFEFE!important;
border-bottom:1px solid #666;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <title>Ticket</title>
</head>

<body>
  <div class="container-fluid" style="height:100%">
    <div class="row" style="height:100%">
      <div class="col-sm-2 col-md-2 col-lg-1 col-xl-1" style="padding:0px!important;height:100%">
        <nav class="navbar navbar-expand-sm px-0 flex-row " style="background-color:#333;height:100%;">
          <div class="navbar-collapse collapse" id="navbarWEX">
            <div class="nav flex-column flex-fill">
              <a routerLink="/" class="nav-item">Home</a>
              <a routerLink="/first" class="nav-item">First Item</a>
              <a routerLink="/second" class="nav-item">Second Item</a>
            </div>
          </div>
        </nav>
      </div>
      <div class="col py-2">

        <h2>Hello There</h2>
        <p>Test test test test test test test</p>

      </div>
    </div>
  </div>
  <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
</body>

</html>

Если вы не хотите обновлять загрузчик, вы можете просто добавить flex: 1 1 auto в .nav стиль: 

.nav-item{
color:#FEFEFE!important;
border-bottom:1px solid #666;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>Ticket</title>
</head>

<body>
  <div class="container-fluid" style="height:100%">
    <div class="row" style="height:100%">
      <div class="col-sm-2 col-md-2 col-lg-1 col-xl-1" style="padding:0px!important;height:100%">
        <nav class="navbar navbar-expand-sm px-0 flex-row " style="background-color:#333;height:100%;">
          <div class="navbar-collapse collapse" id="navbarWEX">
            <div class="nav flex-column" style="flex: 1 1 auto">
              <a routerLink="/" class="nav-item">Home</a>
              <a routerLink="/first" class="nav-item">First Item</a>
              <a routerLink="/second" class="nav-item">Second Item</a>
            </div>
          </div>
        </nav>
      </div>
      <div class="col py-2">

        <h2>Hello There</h2>
        <p>Test test test test test test test</p>

      </div>
    </div>
  </div>
  <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...