спасибо за отличную информацию! Я высоко ценю это! Это сработало ~

ами пытался разными способами заставить свои навигационные кнопки бытьмобильный реагирующих и рухнуть вуказанный вертикальный порядок, Я хочу, чтобы кнопки навигации сворачивались ввертикальный столбец под двумя логотипами, как только размер экрана уменьшится (до 500 пикселей). Как мне исправить мой код, чтобы добиться этого?

.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/

Ответы на вопрос(1)

естественное положение, естественные стили ... я имею в виду, что ваш код не натурален, вы можете увидеть здесь:

.navigation li {
  display: inline-block;

}

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

Я хочу сосредоточиться на этих свойствах, потому что здесь мы говорим:

Вы<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:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 codebwoy08 окт. 2017 г., 05:12
спасибо за отличную информацию! Я высоко ценю это! Это сработало ~

Ваш ответ на вопрос