为什么我的bootstrap 4菜单项在垂直菜单中没有占据全角？

时间：2018-12-19 21:53:29

标签： html css flexbox bootstrap-4

我在尝试创建菜单时遇到问题。我有点老套了，但是这一切使我感到困惑。因此，我想有一个80px的深色垂直侧面菜单，屏幕的其余部分应该是“工作区域”。我的问题是侧面菜单中的项目没有完整宽度（请参见下面的边框），我似乎无法弄清楚为什么不这样做。我现在猜想，它与flexbox有关-一项仅占用所需的空间。我已经从bootstrap 4网站复制了代码，并做了一些修改。但是最后一点，我可以在其中获得所有物品的全幅宽度，即我所缺少的。

.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 :(得分：0)

它与您的.nav-item无关，这是因为.nav的父元素宽度不完整。尝试将引导程序更新为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>

相关问题
最新问题