Bootstrap 4.x stack flex-columns 将 header 放在垂直导航菜单上方

Question

我们有一个左侧导航菜单，如下所示：

<ul class='nav flex-column flex-nowrap text-1rem overflow-hidden' id='vnav'>
  <li class='nav-item'>
    <a class='nav-link collapsed' href='##submenu1' data-toggle='collapse' data-target='##submenu1'>
      <i class='fa-fw fa-sm fa-regular fa-user'></i><span class='ml-1'>Student Profile</span>
    </a>

我想要做的是在<ul>标签上方获得一个 header 。 我试过了：

<div class='flex-column'>
    <h3>header</h3>
</div>
<ul class='nav flex-column flex-nowrap text-1rem overflow-hidden' id='vnav'>

但它只是使它成为一个新的列。 我也尝试过添加行，但也没有运气。

Answer 1

这能解决你的问题吗？

 .header { width: 20vw; height: 10vh; border: 1px solid red; }.nav { width: 20vw; height: 90vh; border: 1px solid red; } @media screen and (max-width: 768px) {.header { height: 20vh; }.nav { height: 80vh; } }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> <div class='header flex-column'> <h3>header</h3> </div> <ul class='nav flex-column flex-nowrap text-1rem overflow-hidden' id='vnav'> <li class='nav-item'> <a class='nav-link collapsed' href='##submenu1' data-toggle='collapse' data-target='##submenu1'> <i class='fa-fw fa-sm fa-regular fa-user'></i><span class='ml-1'>Student Profile</span> </a> </li> </ul>