Question

Codepen：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;
}

我遇到两个主要问题：

当窗口宽度变小（折叠侧边栏）然后单击按钮一次以使其再次弹出时（此时不是侧边栏而是页面顶部的一行），一切工作良好。但是当我再次放大窗口时（侧边栏扩展/可见），侧边栏已经失去了它的全高，只占用了自己的高度，而不是像以前那样占据了整个页面的高度。
（重新加载页面）。再次使窗口宽度变小，然后单击汉堡按钮使侧边栏可见，然后再次单击它以再次隐藏它。如果您现在放大页面，您将看到侧边栏不会再次显示/展开。它应该。

我该如何解决这个问题？我已经尝试过各种各样的CSS规则，但似乎我无法以良好的方式为我做引导工作。我想避免在javascript中自己写这个，因为我想学习使用现有的库。

Answer 1

将!important添加到某些CSS规则中可以解决问题：

新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;
}

这样做的原因是，当单击汉堡包按钮时，引导程序会将hss注入html，而汉堡包按钮会覆盖元素上的其他规则，除非使用!important。另外，

Bootstrap折叠div，默认情况下隐藏在特定宽度

1 个答案: