使用媒体查询在设置的屏幕宽度和 bootstrap 网格处关闭 css 规则

Question

我正在创建的网页上有一个我想成为的侧边栏：

当屏幕低于设定尺寸时，短而宽（屏幕宽度）。
当屏幕超过设定尺寸时又长又细（屏幕的长度）

_{注意：我通过手动 deleting/adding 相关 CSS 规则制作了这些屏幕截图。}

问题是我正在尝试使用 bootstrap 和媒体查询来更改列大小并关闭高度，但到目前为止我还没有成功。

@media screen and (max-width: 300px){
    /* Only apply the side bar height above screen width of 300px*/
    .sidebar-wrapper{
        padding: 7px 0px;
        margin: 0px;
        background-color: hsl(115,75%,25%);
        height: calc(100vh - 5em) /*<-----never applied*/
    }
}
@media screen and (min-width: 300px){
    /* Don't apply the side bar height above screen width of 300px*/
    .sidebar-wrapper{
        padding: 7px 0px;
        margin: 0px;
        background-color: hsl(115,75%,25%);
    }
}

<div class="sidebar-wrapper col-md-2">
    <ul class="sidebar-nav">
        <li class="sidebar-brand sidebar-item">
            <a href="#">
               Malmesbury Tandoori
            </a>
        </li>
        {%for section in foodcategory_list%}
        <li class = "sidebar-item">
            <a href="#{{section.name}}">{{section.name}}</a>
        </li>
        {%endfor%}
    </ul>
</div>
<div class = "menu-wrapper col-md-10">
    <h2>Menu</h2>
    <table>
        .....table stuff........
    </table>
</div>

我四处寻找解释和教程，但我不明白为什么我的规则不适用。

有人可以帮助我吗？

Answer 1

这可能会奏效或给您一些想法。您可以在媒体查询中将边栏 width/height 从固定更改为 100%，而无需使用列。参见示例。

body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
}
.sidebar-left {
  background: green;
  color: white;
  padding-top: 25px;
  font-size: 14px;
}
.sidebar-left ul {
  list-style: none;
  text-align: left;
}
@media (min-width: 480px) {
  .main-wrapper {
    padding: 5px 20px;
    margin: 0 auto;
  }
  .sidebar-left {
    width: 150px;
    height: 100%;
    float: left;
    overflow: hidden;
    overflow-style: auto;
    position: absolute;
  }
  .content-container-right {
    height: 100%;
    overflow: auto;
    overflow-style: auto;
    position: relative;
    margin-left: 150px;
    overflow-x: hidden;
    /*border:5px solid #fff;*/
  }
}
@media (max-width: 479px) {
  .main-wrapper {
    padding: 5px 10px;
    margin: 0 auto;
    width: 100%;
  }
  .sidebar-left {
    background: green;
    height: 100%;
    width: 100%;
  }
  .sidebar-left ul {
    padding-right: 20px;
  }
  .sidebar-left ul > li {
    display: inline-block;
  }
  .content-container-right {
    height: 100%;
    margin-left: 0;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<img src="http://placehold.it/2500x500/f5f5f5/ff0?text=Image" class="img-responsive">
<div class="content-wrapper">
  <div class="sidebar-left">
    <ul>
      <li>
        <p>Sidebar 0</p>
      </li>
      <li>
        <p>Sidebar 1</p>
      </li>
      <li>
        <p>Sidebar 2</p>
      </li>
      <li>
        <p>Sidebar 3</p>
      </li>
      <li>
        <p>Sidebar 4</p>
      </li>
      <li>
        <p>Sidebar 5</p>
      </li>
      <li>
        <p>Sidebar 6</p>
      </li>
      <li>
        <p>Sidebar 7</p>
      </li>
      <li>
        <p>Sidebar 8</p>
      </li>
      <li>
        <p>Sidebar 9</p>
      </li>
      <li>
        <p>Sidebar 10</p>
      </li>
      <li>
        <p>Sidebar 11</p>
      </li>
      <li>
        <p>Sidebar 12</p>
      </li>
      <li>
        <p>Sidebar 13</p>
      </li>
    </ul>
  </div>
  <div class="content-container-right">
    <div class="main-wrapper">
      <div class="container">
        <h2>Menu</h2>

        <div class="table-responsive">
          <table class="table table-bordered table-condensed">
            <thead>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>John</td>
                <td>Doe</td>
              </tr>
              <tr>
                <td>Mary</td>
                <td>Moe</td>
              </tr>
              <tr>
                <td>July</td>
                <td>Dooley</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您的代码似乎 fine.I 已测试 it.It 显示了所需的结果。你没有给分号“;”在您的代码中 --> height: calc(100vh - 5em) 我认为这不是problem.Browser 足够聪明，可以理解这一点。

Html

            <div class="sidebar-wrapper col-md-2">
                <ul class="sidebar-nav">
                    <li class="sidebar-brand sidebar-item">
                        <a href="#">
                           Malmesbury Tandoori
                        </a>
                    </li>
                    <li><a href="">aaaa</a></li>
                    <li><a href="">bbb</a></li>
                </ul>
            </div>
            <div class = "menu-wrapper col-md-10">
                <h2>Menu</h2>
                <table>
                    .....table stuff........
                </table>
            </div>

css

@media screen and (max-width: 300px){
    /* Only apply the side bar height above screen width of 300px*/
    .sidebar-wrapper{
        padding: 7px 0px;
        margin: 0px;
        background-color:hsl(115,75%,25%);
        height: calc(100vh - 10em); /*<-----never applied*/
    }
}

@media screen and (min-width: 300px){
    /* Don't apply the side bar height above screen width of 300px*/
    .sidebar-wrapper{
        padding: 7px 0px;
        margin: 0px;
        background-color:  hsl(115,75%,25%);
    }
}

使用媒体查询在设置的屏幕宽度和 bootstrap 网格处关闭 css 规则

Use media query to turn css rule off at set screen width, and bootstrap grids

html

css

media-queries

twitter-bootstrap