当页面的其余部分响应时，使导航栏响应

我正在为免费代码阵营上的项目创建组合页面，并且我无法使导航栏响应。它基本上是2格;一个用于导航按钮，另一个用于背景颜色和形状。我对编码感到陌生，但在这方面遇到了困难。我使用代码笔进行编码，到目前为止，这是我的代码。当页面的其余部分响应时，使导航栏响应

HTML

<div class="container"> 
    <div id="navigation"> 
     <nav> 
      <ul> 
       <li><a href="#home">Home</a></li> 
       <li><a href="#Portfolio">Portfolio</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul> 
     </nav> 
    </div> 

    <div id="Border"> 
    </div> 
</div>

CSS

.flex-container { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
    text-align: center; 
} 

#navigation { 
    display: block; 
    width:300px; 
    height: 35px; 
    padding:18px 12px; 
    position: fixed; 
    left: 100px; 
    width: 200%; 
    z-index: 22222; 
    transition: all ease .5s; 
} 

#Border { 
    height: 75px; 
    width: 1140px; 
    position: fixed; 
    background: #8e0e17; 
} 

li{ 
    display: inline; 
    padding: 160px; 
} 

ul { 
    list-style-type: none; 
} 

nav li a{ 
    color:grey; 
    font-weight:700; 
    font-size: 25px; 
}

请帮忙，谢谢。

来源

2016-12-15 risingmoon77

你如何看待屏幕尺寸崩溃的导航？传统上，您必须关闭导航项目或使用类似“汉堡”菜单的菜单，以较小的屏幕尺寸扩展导航。 – mrogers

看到这个http://codepen.io/anon/pen/PqEmgP。它使用CSS媒体查询规则。这些规则使网页能够响应不同的分辨率。

在本例中在768和991像素之间的屏幕中加入两个规则：

@media (min-width: 768px) and (max-width: 991px) { 
    .navbar{ 
    font-size: 15px !important; 
    } 
    .pull-left>img { 
    height: 65px !important; 
} 
}

这增加了与类中的任何元素=“导航栏”字体大小（信纸尺寸）等于14个像素（之一在屏幕上计数的单位）

.navbar{ 
    font-size: 15px !important; 
}

使响应式网站的另一种方法是使用现成的css规则（它被称为库）。一个着名的是bootstrap尝试搜索与你的codecamp的好运有点

来源

2016-12-15 22:58:20 partizanos

当页面的其余部分响应时，使导航栏响应

回答

相关问题