当我将浏览器窗口调整为较小尺寸时，为什么我的导航栏（弹性框）没有折叠？

时间：2016-11-25 22:41:44

标签： html css flexbox

我正在修改FlexBox来设计我的网站，我正在尝试应用这些技术来制作响应式和可折叠的导航栏（理想情况下适用于移动用户）。我怎样才能做到这一点？显然.nbar类中的flex命令不起作用。

*{
  margin:0;
  font-family: 'Roboto', sans-serif;
}
.wrapper{
  width:100%;
  min-width: 960px;
  margin:0 auto;
  /*display:flex;
  align-items: flex-end;
  this is just for the night vision button to position better
  */
}
.parent{
  display:flex;
  flex-wrap: wrap;
  /*these two at the bottomr are optional to
  center them on the page
  max-width: 960px;
  margin:0 auto;*/
  max-width: 960px;
  margin: auto;
}

/*WE MISSED THE .ONE SELECTOR*/
.one{
  flex-grow: 1;
}
.title{
  text-align: center;
  position:relative;
  font-size: 50px;
  top:20px;
}

.header{
  height:100px;
  width:100%;
  order:0;
  border-bottom: 1px solid rgb(0,0,0);
}
.nav{
  width:100%;
  /*min-width: 900px;*/
  height:40px;
  border-bottom: 1px solid rgb(0,0,0);
  order:1;
}
.banner{
  width:100%;
  min-width: 960px;
  height:500px;
  color:white;
  background-color: rgb(0,0,0);
  order:3;
}
.boxOne{
  width:45%;
  min-width: 200px;
  height:300px;
  border-right: 1px solid rgb(0,0,0);
  order:4;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  border-left: 1px solid rgb(120,120,120);
  text-align: justify;
}
.boxTwo{
  width:45%;
  min-width: 200px;
  height:300px;
  order:4;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  border-right: 1px solid rgb(120,120,120);
}
.footer{
  width:100%;
  height:100px;
  border-top: 1px solid rgb(0,0,0);
  border-bottom: 1px solid rgb(0,0,0);
  border-right: 1px solid rgb(120,120,120);
  border-left: 1px solid rgb(120,120,120);
  order:5;
}
.nbar{
display:flex;
flex-wrap: wrap;
align-items: stretch;
flex-flow: wrap;
}
  .two{
    flex-grow: 0;
  }
      .home {
        order:1;
      }
      .services {
        order:2;
      }
      .testimonials {
        order:3;
      }
      .portfolio {
        order:4;
      }
      .contact {
        order:5;
      }
li {
  display:inline-flex;
  padding:10px 40px 10px 60px;
  font-size: 15px;
}
a:link {
    text-decoration: none;
    color:black;
}

a:visited {
    text-decoration: none;
    color:black;
}
a:hover {
  text-decoration: underline;
}
.disc{
  padding-left: 5px;
  padding-top: 5px;
  font-size: 10px;
  color: rgb(150,150,150);
}
.people{
  overflow: hidden;
  height:500px;
  width:960px;
}
/*.popup {
  background-color: white;
  height: 20px;
  width:90px;
  border: 1px solid rgb(255, 0, 0);
  position:fixed;
  bottom:0;
}*/
<!DOCTYPE html>
<html>
<!-- dockmann -->
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script src="jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>
<body>
  <div class="wrapper">
    <div class="parent">
      <div class="one header">
        <p class="title">DOCKMANN</p>
      </div>
      <!-- end header -->
      <div class="one nav">
        <ul class="nbar">
          <li class="two home">
            <a href="www.dockmann.com">HOME</a>
          </li>
          <li class="two services">
            SERVICES
          </li>
          <li class="two testimonials">
            TESTIMONIALS
          </li>
          <li class="two portfolio">
            PORTFOLIO
          </li>
          <li class="two contact">
            CONTACT
          </li>
        </ul>
      </div>
      <!-- end nav -->
      <div class="one banner">
        <img class="people" src="image/macdesk.jpg" />
      </div>
      <!-- end banner -->
      <div class="one boxOne">
        <h2>Who we are...</h2>
        <br />
        Filler
      </div>
      <!-- end boxOne -->
      <div class="one boxTwo">
        boxTwo
      </div>
      <!-- end boxTwo -->
      <div class="one footer">
      <p class="disc">
      filler
      </p>
      </div>
      <!-- end footer -->

    </div>

    <!-- <button class="popup">
      Night Vision!
    </div> -->
  </div>

</body>
</html>

2 个答案:

答案 0 :(得分：0)

从.wrapper移除min-height并从.nav栏移除*{ margin:0; font-family: 'Roboto', sans-serif; } .wrapper{ width:100%; margin:0 auto; /*display:flex; align-items: flex-end; this is just for the night vision button to position better */ } .parent{ display:flex; flex-wrap: wrap; /*these two at the bottomr are optional to center them on the page max-width: 960px; margin:0 auto;*/ margin: auto; } /*WE MISSED THE .ONE SELECTOR*/ .one{ flex-grow: 1; } .title{ text-align: center; position:relative; font-size: 50px; top:20px; } .header{ height:100px; width:100%; order:0; border-bottom: 1px solid rgb(0,0,0); } .nav{ width:100%; /*min-width: 900px;*/ border-bottom: 1px solid rgb(0,0,0); order:1; } .banner{ width:100%; min-width: 960px; height:500px; color:white; background-color: rgb(0,0,0); order:3; } .boxOne{ width:45%; min-width: 200px; height:300px; border-right: 1px solid rgb(0,0,0); order:4; padding: 5px; padding-left: 10px; padding-right: 10px; padding-top: 10px; border-left: 1px solid rgb(120,120,120); text-align: justify; } .boxTwo{ width:45%; min-width: 200px; height:300px; order:4; padding: 5px; padding-left: 10px; padding-right: 10px; padding-top: 10px; border-right: 1px solid rgb(120,120,120); } .footer{ width:100%; height:100px; border-top: 1px solid rgb(0,0,0); border-bottom: 1px solid rgb(0,0,0); border-right: 1px solid rgb(120,120,120); border-left: 1px solid rgb(120,120,120); order:5; } .nbar{ display:flex; flex-wrap: wrap; align-items: stretch; flex-flow: wrap; } .two{ flex-grow: 0; } .home { order:1; } .services { order:2; } .testimonials { order:3; } .portfolio { order:4; } .contact { order:5; } li { display:inline-flex; padding:10px 40px 10px 60px; font-size: 15px; } a:link { text-decoration: none; color:black; } a:visited { text-decoration: none; color:black; } a:hover { text-decoration: underline; } .disc{ padding-left: 5px; padding-top: 5px; font-size: 10px; color: rgb(150,150,150); } .people{ overflow: hidden; height:500px; width:960px; } /*.popup { background-color: white; height: 20px; width:90px; border: 1px solid rgb(255, 0, 0); position:fixed; bottom:0; }*/似乎可以解决问题，

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<!-- dockmann -->
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script src="jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>
<body>
  <div class="wrapper">
    <div class="parent">
      <div class="one header">
        <p class="title">DOCKMANN</p>
      </div>
      <!-- end header -->
      <div class="one nav">
        <ul class="nbar">
          <li class="two home">
            <a href="www.dockmann.com">HOME</a>
          </li>
          <li class="two services">
            SERVICES
          </li>
          <li class="two testimonials">
            TESTIMONIALS
          </li>
          <li class="two portfolio">
            PORTFOLIO
          </li>
          <li class="two contact">
            CONTACT
          </li>
        </ul>
      </div>
      <!-- end nav -->
      <div class="one banner">
        <img class="people" src="image/macdesk.jpg" />
      </div>
      <!-- end banner -->
      <div class="one boxOne">
        <h2>Who we are...</h2>
        <br />
        Filler
      </div>
      <!-- end boxOne -->
      <div class="one boxTwo">
        boxTwo
      </div>
      <!-- end boxTwo -->
      <div class="one footer">
      <p class="disc">
      filler
      </p>
      </div>
      <!-- end footer -->

    </div>

    <!-- <button class="popup">
      Night Vision!
    </div> -->
  </div>

</body>
</html>
＆＃13; 
{{1}}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

由于我的经验li标签不能与flex-wrap一起使用，因此你的所有＆＃39;

将保持一条线。如果你想解决问题，请改变这个：

<ul class='nbar'>
  <li>menu1</li>
  <li>menu2</li>
</ul>

到此：

<div class='nbar'>
  <div>menu1</div>
  <div>menu2</div>
</div>

它会起作用。并且请不要忘记使用-webkit-用于flex属性，因为某些移动浏览器仅适用于此。例如：

display:-webkit-flex;
-webkit-flex-wrap: wrap;
相关问题
最新问题