如何使导航按钮移动响应和按顺序折叠？

Question

我一直在尝试几个小时，采用不同的方法让我的导航按钮变为移动响应并折叠为指定的垂直顺序。一旦屏幕尺寸缩小（大约500px），我想让导航按钮在的两个徽标下方的垂直列中折叠。如何修复我的代码以实现此目的？

.container-fluid { 
 
    border: 1px solid #000000; 
 
    max-width: 1600px; 
 
    overflow: hidden; 
 
} 
 

 
.wrap { 
 
    /*background-color: yellow;*/ 
 
    /*overflow: hidden;*/ 
 
} 
 

 
.Logos { 
 
    width: 312px; 
 
    display: inline-block; 
 
    /*background-color: blue;*/ 
 
} 
 

 

 
/* 
 
    .Logos img{ 
 
    max-width: 300px; 
 
    height: auto; 
 
    } 
 
    */ 
 

 
.nav.wrap.one { 
 
    display: inline-block; 
 
    /*background-color: green;*/ 
 
    float: right; 
 
    margin-top: 25px; 
 
} 
 

 
ul.navigation { 
 
    font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    /*text-align center;*/ 
 
    /*border: 1px solid green;*/ 
 
    /*overflow: hidden;*/ 
 
} 
 

 
.navigation li { 
 
    display: inline-block; 
 
} 
 

 
.navigation a { 
 
    background: #395870; 
 
    background: linear-gradient(#49708f, #293f50); 
 
    border-right: 1px solid rgba(0, 0, 0, .3); 
 
    color: #fff; 
 
    padding: 12px 20px; 
 
    text-decoration: none; 
 
} 
 

 
.navigation a:hover { 
 
    background: #314b0; 
 
    box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3); 
 
} 
 

 
.navigation li:first-child a { 
 
    border-radius: 4px 0 0 4px; 
 
} 
 

 
.navigation li:last-child a { 
 
    border-right: 0; 
 
    border-radius: 0 4px 4px 0; 
 
} 
 

 
.row.two { 
 
    background-image: url(https://s1.postimg.org/5gvbly4hin/East_Hyde_Park_Chicago_aerial_0470.jpg); 
 
    background-position: absolute; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    max-width: 100%; 
 
    height: 550px; 
 
    margin: auto; 
 
} 
 

 
.floater.box { 
 
    background-color: rgba(255, 255, 255, .40); 
 
    border-radius: 10px; 
 
    /*opacity: .45;*/ 
 
    max-width: 75%; 
 
    height: 200px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    overflow: hidden; 
 
} 
 

 
.form-search { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    font: bold 13px sans-serif; 
 
    max-width: 325px; 
 
    position: relative; 
 
} 
 

 
.form-search input { 
 
    width: 230px; 
 
    box-sizing: border-box; 
 
    border-bottom-left-radius: 2px; 
 
    border-top-left-radius: 2px; 
 
    background-color: #ffffff; 
 
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); 
 
    padding: 14px 15px 14px 40px; 
 
    border: 1px solid #b6c3cd; 
 
    ; 
 
    border-right: 0; 
 
    color: #4E565C; 
 
    outline: none; 
 
    margin-top: 70px; 
 
    -webkit-appearance: none; 
 
} 
 

 
.form-search button { 
 
    border-bottom-right-radius: 2px; 
 
    border-top-right-radius: 2px; 
 
    background-color: #6caee0; 
 
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); 
 
    color: #ffffff; 
 
    padding: 15px 22px; 
 
    margin-left: -4px; 
 
    cursor: pointer; 
 
    border: none; 
 
    outline: none; 
 
} 
 

 
.form-search i { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 20px; 
 
    font-size: 16px; 
 
    color: #80A3BD; 
 
} 
 

 

 
/* Placeholder color */ 
 

 
.form-search input::-webkit-input-placeholder { 
 
    color: #879097; 
 
} 
 

 
.form-search input::-moz-placeholder { 
 
    color: #879097; 
 
    opacity: 1; 
 
} 
 

 
.form-search input:-ms-input-placeholder { 
 
    color: #879097; 
 
} 
 

 
.nav.wrap.two { 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 100%; 
 
    margin-top: 10px; 
 
}

<div class="container-fluid"> 
 

 
    <!-- Top Box --> 
 
    <div class="wrap"> 
 
    <div class="Logos"> 
 
     <img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" /> 
 
     <img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" /> </div> 
 
    <div class="nav wrap one"> 
 
     <!--navigation buttons--> 
 
     <ul class="navigation"> 
 
     <li id="NAV-ONE"><a href="#">LOG IN</a></li> 
 
     <li id="NAV-TWO"><a href="#">BUY A HOME</a></li> 
 
     <li id="NAV-THREE"><a href="#">SELL A HOME</a></li> 
 
     <li id="NAV-FOUR"><a href="#">CONTACT US</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <!-- Middle Box --> 
 
    <div class="row two"> 
 
    <div> 
 
     <div class="floater box"> 
 

 
     <form class="form-search" method="get" action="#"> 
 
      <input type="search" name="search" placeholder="I am looking for.."> 
 
      <button type="submit">Search</button> 
 
      <i class="fa fa-search"></i> 
 
     </form> 
 

 
     </div> 
 

 

 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- Bottom Box --> 
 
<div class="row three"> 
 
    <div class="nav wrap two"> 
 
    <!--navigation buttons--> 
 
    <ul class="navigation"> 
 
     <li id="NAV-A"><a href="#">MY LISTINGS</a></li> 
 
     <li id="NAV-B"><a href="#">COMMUNITIES SERVED</a></li> 
 
     <li id="NAV-C"><a href="#">PROPERTIES</a></li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
</div>

这里是我的CodePen链接：https://codepen.io/IDCoder/full/rGWeEE/

Answer 1

CSS是所有关于自然秩序，自然的位置，自然的风格......我的意思是，你的代码ISN不自然，你可以看到这里：

.navigation li { 
    display: inline-block; 

} 

.navigation a { 
    padding: 12px 20px; 
} 

我想把我的焦点放在那些属性，因为我们在这里说G：

您<a>元素都是这里面的人 - ><li>（<li id="NAV-ONE"><a href="#">LOG IN</a></li>），是你！即使你在他内部，你也会变得更大！

嗯，在现实生活中，我们不能把更大的东西放到更小的空间里。现实生活中发生的事情和CSS是：更小的东西变成更大的东西。

因此，如果我们做出这种改变：

.navigation li { 
    display: inline-block; 
    padding: 12px 20px; 
} 

.navigation a { 
    /* We changed who is bigger than who */ 
} 

它需要一个自然顺序（因为现在的空间让.navigation a会比他大）。最后的代码是这样的（当你使用手机，这将包装）：

.navigation li { 
    display: inline-block; 
    padding: 12px 20px; 
    background: linear-gradient(#49708f, #293f50); 
    background: #395870; 
    border-right: 1px solid rgba(0, 0, 0, .3); 
} 

.navigation a { 
    color: #fff; 
    text-decoration: none; 
} 

更多

我玩，我发现这个很酷的方式来包装时，屏幕小，我认为这很酷：

@media all and (max-width: 500px){ 
    ul.navigation{ 
     display: flex; 
     flex-wrap: wrap; 
     justify-content: flex-end; 
    } 
} 

此外，请记住，当你想响应式设计需要元：视到HTML的HEA d：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">