Html div引导导航栏宽度：ipad为40%

我有一个带有侧边栏的简单地图站点，可以打开和关闭。所有这些都可以在Pc和电话上正常工作，但我无法在平板电脑上使用响应灵敏的导航栏功能

以下是css：

html, body { height: 100%; }
body {
  padding-top: 50px;
}
.container-fluid {
  margin: 0;
  padding: 0;
  height:100%;
  width: 100%;
}
.map{
  width:100%;
  height:100%;
}
.sidebar {
  position: absolute;
  top: 0px;
  left: 0px;
  height: inherit;
  width: 30%;
  z-index: 10005;
  background-color: #fff;
  overflow-y: scroll;
  padding-top: 50px;
  display: none;
}
/*
 * iPad - nav list not complete
 */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
  .sidebar {
    width: 40%;
  }
}
/*
 * Phone - works
 */
@media (max-width: 767px) {
  .sidebar {
    width: 100%;
  }
}

以及html：

<!-- form container -->
<div class="container sidebar" id="form-container">
  <nav class="navbar navbar-fixed-top navbar-inverse sidebar-header" >
    <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#form-container-navbar"  aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a id="form-container-title" class="navbar-brand" href="#">Form</a>
        </div><!-- /navbar-header -->

        <div id="form-container-navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav ">
             <li><a href="#">Open</a></li>
             <li><a href="#">Maybe</a></li>
             <li><a href="#">Whatever</a></li>
             <li><a href="#">More</a></li>
             <li><a href="#">More</a></li>
             <li><a href="#">More</a></li>
             <li><a id="close-form" href="#">Close</a></li>
          </ul>
        </div><!-- /navbar-collapse -->
    </div><!-- container -->
  </nav><!-- navbar -->

  <form role="form" id="form1">
    <div class="form-group">
      <label for="species">Species</label>
      <input id="species" class="form-control" type="text"/>
    </div>
    <div class="form-group">
      <label for="risk">Risk</label>

<!-- etc, etc -->

切换导航









种
风险

在个人电脑上，我得到了一个水平菜单，扩展到“侧边栏”之外。这很好。 在手机上，我可以切换折叠的菜单——也可以。 但在iPad上，我可以看到一个水平菜单，但我看不到超出.sidebar宽度的文本。无益的

理想情况下，我会得到折叠菜单，我可以切换，或水平菜单，我可以看到

有人能帮忙吗

谢谢

---

Mini

您的导航位于侧边栏中，而不是页面顶部。这是故意的吗？是的。我在顶部有一个很好的插件，但这是一个不同的特定于#form containerI的插件。我现在帮不上忙，因为今天是母亲节，但看看这是否会有帮助：谢谢-看起来是个不错的插件，但我想用CSS引导实现这一点-必须是可能的：）如果没有所有的代码，很难完全理解你在做什么。例如，您的侧边栏是隐藏的，所以我必须手动取消隐藏它，甚至可以看到它。用户将如何看到它？此外，你在侧边栏中有一个导航链接日志-太多了，甚至无法容纳。这也是故意的吗？