根据屏幕大小更改高度

Question

我有一个可折叠的导航条构建与bootstrap 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%高度；

下面的片段：

null

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>