如何使導航按鈕移動響應和按順序摺疊？

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">