Bootstrap 4.x堆栈flex-columns，用于在垂直导航菜单上方放置标题

7fyelxc5 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(1)|浏览(253)

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

<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>标签上获得一个头。

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

但它只是使它成为一个新的列。我已经尝试添加行以及没有运气。

twitter-bootstrap

来源：https://stackoverflow.com/questions/73855291/bootstrap-4-x-stack-flex-columns-to-put-a-header-above-a-vertical-navigation-men

1条答案

按热度按时间

f8rj6qna1#

这能解决你的问题吗？

.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>

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap 4.x堆栈flex-columns，用于在垂直导航菜单上方放置标题

1条答案

相关问题

热门标签

最新问答