html - Bootstrap collapsing div 在一定宽度下默认隐藏

Question

代码笔:https://codepen.io/sahandz/pen/zRzoEP

我正在尝试创建一个在最大宽度 766 像素处折叠的边栏，以及一个在单击时再次显示的汉堡包按钮。

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

    <link rel="stylesheet" href="css/base.css">

    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<div class="container-fluid">
    <div class="topdiv">
      <h1>Dinner Planner</h1>
    </div>
    <div class="row dish-item-view">
      <button type="button" data-toggle="collapse" data-target="#sidebar" id="hamburger">
        <i class="fas fa-bars"></i>  
      </button>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 sidebar" id="sidebar">
        <div>
          <div class="noofpeople">
            <div class="row noofpeople-wrapper">
              <h4>My Dinner</h4>
              <label>People <input type="number" class="form-control"></label> 
            </div>
          </div>
          <div class="dinneroverview">
            <div class="dish-overview-header">
              <span class="dish-name">Dish name</span><span class="cost">Cost</span>
            </div>
            <div class="price">
              <span id="pricetag">SEK 0.00</span>
            </div>
            <div class="confirm">
              <button type="button" class="btn btn-default">Confirm Dinner</button>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 main-bar">
        <div class="row dishsearch">
          <h4>Find a Dish</h4>
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-padding">
            <input type="text" class="form-control" value="Enter keyword"> 
          </div>
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-padding">
            <select class="form-control">
            </select>
        </div>
          <button type="button" class="btn btn-default">search</button>
        </div>
        <div class="row dishreel">

        </div>
      </div>
    </div>

    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

    <!-- The application JavaScript code -->
    <script src="js/app.js"></script>
    <script src="js/model/dinnerModel.js"></script>
    <script src="js/view/sidebarView.js"></script>

CSS:

@media (min-width:767px){
  #hamburger{
    display:none;
  }
  .sidebar{
    height:100%;
    border-style:solid;
    display:block;
  }
  .collapse{
    display:block;
  }
}
@media (max-width:766px){
  .sidebar{
    display:none;
  }
}
.dish-item-view{
    height:100vh;
}

我遇到了两个主要问题:

1. 当缩小窗口宽度(折叠侧边栏)然后单击一次按钮使其再次弹出(这次不是作为侧边栏而是作为页面顶部的一行)时，一切工作正常。但是，当我再次放大窗口(边栏展开/可见)时，边栏已经失去了它的全部高度，只占据了它自己的高度，而不是像以前那样占据页面的全部高度。

2. (重新加载页面)。再次缩小窗口宽度，然后单击汉堡包按钮使侧边栏可见，然后再次单击它再次隐藏它。如果现在放大页面，您将看到侧边栏不再可见/展开。应该的。

我该如何解决这个问题？我已经尝试了各种 CSS 规则，但似乎我无法让 bootstrap 以一种好的方式为我工作。我想避免自己用 javascript 编写这个，因为我想学习使用现有的库。

Answer 1

在某些 CSS 规则中添加 !important 可以达到目的:

新的 CSS:

@media (min-width:767px){
  #hamburger{
    display:none;
  }
  .sidebar{
    height:100% !important;
    border-style:solid;
    display:block !important;
  }
  .collapse{
    display:block;
  }
}
@media (max-width:766px){
  .sidebar{
    display:none;
  }
}
.dish-item-view{
    height:100vh;
}

之所以可行，是因为 bootstrap 在单击汉堡包按钮时将 css 注入(inject)到 html 中，这会覆盖元素上的其他规则，除非使用 !important。还有，