Question

我有一个带有引导程序4的可折叠导航栏。我使用col-sm-2和navbar-expand-sm使其折叠成一个汉堡包，而屏幕尺寸却应占据整个宽度。

问题是在sm屏幕上方，我希望它具有h-100，所以它是一个侧边栏，但作为sm / xs，我希望它仅占用切换按钮所需的空间。

无论如何，有没有用Bootstrap来实现这一点的？还是我卡住了jquery来添加/删除h-100类？

<div class="container">
    <nav class="navbar-nav navbar-expand-sm flex-column navbar-dark col-sm-2 fixed-top" >
        <div>
            <a href="{{url_for('index')}}" class="navbar-brand">
                <img src="{{url_for('static', filename='img/Logo.png')}}" height="50px">
            </a>
            <button class="navbar-toggler col-2 float-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse flex-column" id="navbarResponsive">
            <a class="nav-link {{ 'active' if active_page == 'new_user' else '' }}" href="{{url_for('new_user')}}">Sign Up</a>
            <a class="nav-link {{ 'active' if active_page == 'new_comment' else '' }}" href="{{url_for('new_comment')}}">Opine</a>
        </div>        
    </nav>
</div>

Answer 1

这是媒体查询的好用例... h-100基本上增加了100％的高度；

以下代码段：

nav {
  border: 1px solid red;
}

@media screen and (min-width:579px) {
  nav {
    border: 1px solid green;
    height: 100vh;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


<div class="container">
  <nav class="navbar-nav navbar-expand-sm flex-column navbar-dark col-sm-2 fixed-top">
    <div>
      <a href="{{url_for('index')}}" class="navbar-brand">
        <img src="https://akberiqbal.com/favicon.ico" height="50px">
      </a>
      <button class="navbar-toggler col-2 float-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
    </div>
    <div class="collapse navbar-collapse flex-column" id="navbarResponsive">
      <a class=" nav-link {{ 'active' if active_page == 'new_user' else '' }}" href="{{url_for('new_user')}}">Sign Up</a>
      <a class="nav-link {{ 'active' if active_page == 'new_comment' else '' }}" href="{{url_for('new_comment')}}">Opine</a>
    </div>
  </nav>
</div>

根据屏幕尺寸更改高度

1 个答案: