Question

我正在尝试使我的导航响应。它看起来像我希望它在全屏/桌面上看的方式，但当我在平板电脑或智能手机上查看它时，项目重叠并且看起来很糟糕。我玩过清理，间距，但我的CSS知识已经枯竭了。

这是我当前导航的片段

#nav {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}
#navWrapper {
  width: 80%;
  height: auto;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 10px;
  text-align: center;
}
.nav {
  width: 18%;
  height: auto;
  margin: 0 auto;
  float: left;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 180%;
  color: #444445;
  line-height: 2em;
  padding-top: 30px;
  font-weight: bold;
}
.nav2 {
  width: 18%;
  height: auto;
  margin: 0 auto;
  float: left;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 180%;
  color: #FFFFFF;
  line-height: 2em;
  padding-top: 30px;
  font-weight: bold;
}
.logo {
  float: left;
  width: 26%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}

<div id="nav">
  <div id="navWrapper">
    <div class="nav"><a href="/pages/products/">products</a>
    </div>
    <div class="nav"><a href="/pages/about-us/">about us</a>
    </div>
    <div class="logo">
      <a href="/">
        <img src="{{ 'LOGO.png' | asset_url }}" border="0" style="max-width: 100%; height:auto;" />
      </a>
    </div>
    <div class="nav"><a href="/community/contact/">contact</a>
    </div>
    <div class="nav2"><a href="/pages/products/">buy now</a>
    </div>
  </div>
</div>

Answer 1

无需为每个div提供nav类。你必须尝试bootstraps导航类。它会自动隐藏你的导航栏。菜单仅在单击按钮时显示。在<ul>内定义菜单检查以下链接：
http://www.bootply.com/lbIb5ZaHbq#

检查小型设备的菜单

Answer 2

我不确定这是否是你要找的东西：

#navWrapper {white-space: nowrap;
    max-width: 99%;}
.nav {width: 20%;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin: 0 3%;
    white-space: normal;}

.logo {height: auto; margin: 0 auto; text-align: center; }

<body>
    <div id="nav">
    <div id="navWrapper">
    <div class="nav"><a href="/pages/products/">products</a></div>
    <div class="nav"><a href="/pages/about-us/">about us</a></div>
    <div class="nav logo"><a href="/"><img src="{{ 'LOGO.png' | asset_url }}" border="0" style="max-width: 100%; height:auto;"/></a></div>
    <div class="nav"><a href="/community/contact/">contact</a></div>
    <div class="nav"><a href="/pages/products/">buy now</a></div>
    </div>
</div>
</body>

Answer 3

对于响应式外观，您应该始终使用媒体查询。我改变你的CSS只是为了告诉你它是如何工作的。我没有对您的徽标进行任何更改，因为您没有提供徽标大小。

基本上，您可以查询所需的每个分辨率，并根据该分辨率更改元素的大小。

在你的情况下，我刚刚在某些分辨率上更改了字体大小的百分比，并删除了 #navWrapper width （我认为你想让它对该值做出响应）。我希望你明白你应该如何做出回应。

#nav {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}
#navWrapper {
 
  height: auto;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 10px;
  text-align: center;
}
.nav {
  width: 18%;
  height: auto;
  margin: 0 auto;
  float: left;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 180%;
  color: #444445;
  line-height: 2em;
  padding-top: 30px;
  font-weight: bold;
}
.nav2 {
  width: 18%;
  height: auto;
  margin: 0 auto;
  float: left;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 180%;
  color: #FFFFFF;
  line-height: 2em;
  padding-top: 30px;
  font-weight: bold;
}
.logo {
  float: left;
  width: 26%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}


@media (min-width: 768px) and (max-width: 1024px) {
#nav {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}
#navWrapper {
  
  height: auto;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 10px;
  text-align: center;
}
.nav {
  width: 18%;
  height: auto;
  margin: 0 auto;
  float: left;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 130%;
  color: #444445;
  line-height: 2em;
  padding-top: 30px;
  font-weight: bold;
}
.nav2 {
  width: 18%;
  height: auto;
  margin: 0 auto;
  float: left;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 130%;
  color: #FFFFFF;
  line-height: 2em;
  padding-top: 30px;
  font-weight: bold;
}
.logo {
  float: left;
  width: 26%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}

}
@media (max-width: 767px) {
#nav {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}
#navWrapper {
  
  height: auto;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 10px;
  text-align: center;
}
.nav {
  width: 18%;
  height: auto;
  margin: 0 auto;
  float: left;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 100%;
  color: #444445;
  line-height: 2em;
  padding-top: 30px;
  font-weight: bold;
}
.nav2 {
  width: 18%;
  height: auto;
  margin: 0 auto;
  float: left;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 100%;
  color: #FFFFFF;
  line-height: 2em;
  padding-top: 30px;
  font-weight: bold;
}
.logo {
  float: left;
  width: 26%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}
}
@media (max-width: 546px) {
#nav {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}
#navWrapper {
  
  height: auto;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 10px;
  text-align: center;
}
.nav {
  width: 18%;
  height: auto;
  margin: 0 auto;
  float: left;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 80%;
  color: #444445;
  line-height: 2em;
  padding-top: 30px;
  font-weight: bold;
}
.nav2 {
  width: 18%;
  height: auto;
  margin: 0 auto;
  float: left;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 80%;
  color: #FFFFFF;
  line-height: 2em;
  padding-top: 30px;
  font-weight: bold;
}
.logo {
  float: left;
  width: 26%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}
}
@media (max-width: 360px) {
#nav {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}
#navWrapper {
  
  height: auto;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 10px;
  text-align: center;
}
.nav {
  width: 18%;
  height: auto;
  margin: 0 auto;
  float: left;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 60%;
  color: #444445;
  line-height: 2em;
  padding-top: 30px;
  font-weight: bold;
}
.nav2 {
  width: 18%;
  height: auto;
  margin: 0 auto;
  float: left;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 60%;
  color: #FFFFFF;
  line-height: 2em;
  padding-top: 30px;
  font-weight: bold;
}
.logo {
  float: left;
  width: 26%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}
}

<div id="nav">
  <div id="navWrapper">
    <div class="nav"><a href="/pages/products/">products</a>
    </div>
    <div class="nav"><a href="/pages/about-us/">about us</a>
    </div>
    <div class="logo">
      <a href="/">
        <img src="{{ 'LOGO.png' | asset_url }}" border="0" style="max-width: 100%; height:auto;" />
      </a>
    </div>
    <div class="nav"><a href="/community/contact/">contact</a>
    </div>
    <div class="nav2"><a href="/pages/products/">buy now</a>
    </div>
  </div>
</div>

如何使导航div响应而不重叠？

3 个答案: