-1

我正在使用 Twitter Bootstrap 3 创建此站点www.peoplespropertyshop.co.uk，因为您可以看到大屏幕上的导航具有 jquery 效果，可以将框下拉。

我的问题是这也发生在小屏幕上，看起来很糟糕。我已经创建了不同的导航部分，并通过媒体查询隐藏了动画部分，并从所有其他设备隐藏了其他其他导航。

但是对于我的生活，我不明白为什么当您单击小屏幕视图中的图标时，它不再动画但列表也没有出现。

<link href="css/styles.css" rel="stylesheet" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic|Cinzel' rel='stylesheet' type='text/css'>
    <link href="css/menu.css" rel="stylesheet" media="screen">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><img src="images/Logo.png" alt="People's Property Shop Logo"></a>
        </div>
        <!-- Small Screens Nav Bar -->
         <div class="navbar-collapse collapse hidden-sm hidden-md hidden-lg smallscreennav visible-xs">
          <ul class="nav nav-pills navbar-right hidden-xs">
            <li><a href="index.html">Home</a></li>
            <li><a href="whoweare.html">Who We Are</a></li>
            <li><a href="whatwedo.html">What We Do</a></li>
            <li><a href="whowehelp.html">Who We Help</a></li>
            <li><a href="news.html">News/Events</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->    
        <!-- Larger Screens Nav Bar -->
        <div class="navbar-collapse collapse">
          <ul class="nav nav-pills navbar-right hidden-xs">
            <li class="blue">
                <a href="index.html">Home</a>
                    <p class="subtext"><img src="images/Home_img.png" alt="home image" style="margin-top: -10%;"></p>
            </li>
            <li class="blue">
                <a href="whoweare.html">Who We Are</a>
                    <p class="subtext"><img src="images/whoweare_img.png" alt="who we are image" style="margin-top: -10%;"></p>
            </li>
            <li class="blue">
                <a href="whatwedo.html">What We Do</a>
                    <p class="subtext"><img src="images/whatwedo_img.png" alt="what we do image" style="margin-top: -8%;"></p>
            </li>
            <li class="blue">
                <a href="whowehelp.html">Who We Help</a>
                    <p class="subtext"><img src="images/whowehelp_img.png" alt="who we help image" style="margin-top: -10%;"></p>
            </li>
            <li class="blue">
                <a href="news.html">News/Events</a>
                    <p class="subtext"><img src="images/new_img.png" alt="news image" style="margin-top: -10%;"></p>
            </li>
            <li class="blue">
                <a href="contact.html">Contact</a>
                    <p class="subtext"><img src="images/contact_img.png" alt="contact image" style="margin-top: -8%;"></p>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
4

1 回答 1

1

在我看来，您不需要额外的 div，您可以使用媒体查询更改您的 div

#divMenu{
/* do something when it is normal */
max-width:1000px;
}

@media all and (min-width: 333px) and (max-width: 960px){
#divMenu{
 /* do something when it's too small */
max-width:800px;
}
}
于 2013-09-30T15:54:27.493 回答