Bootstrap. Почему div не отзывчив? - PullRequest
Новая
       31

Bootstrap. Почему div не отзывчив?

0 голосов
/ 09 мая 2018

Я сделал меню без начальной загрузки 4. Я смотрю на результат работы и полагаю, что это не адаптивный дизайн. Я хотел бы знать, как сделать так, чтобы расстояние между логотипом с левой стороны и меню с правой стороны (около 226px) изменялось с 226 на 0, а экран уменьшался.

JSFiddle 

.menu {
  max-width: 960px; }

.menu {
  background-color: #e668b1; }

.menu .col-md-3 {
  border: 1px solid red; }

.menuIcon {
  border: 1px solid red; }

nav ul, nav ol {
  margin: 0;
  padding: 0;
  list-style: none; }

.mainav li {
  display: inline-block;
  padding: 0; }

.mainav a {
  font-size: 12px;
  letter-spacing: 0.6px;
  line-height: 10px;
  padding: 16px 17px 14px 19px;
  color: #232323;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  opacity: 0.5;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  transition: 0.5s; }

.mainav .nav_home {
  margin-right: -13px; }

.mainav .nav_pages {
  margin-right: -4px; }

.mainav .nav_elements {
  margin-right: -3px; }

.mainav .nav_product {
  margin-right: -11px; }

.mainav .nav_blog {
  margin-right: -11px; }

.mainav .nav_work {
  margin-right: 6px; }

.mainav .drop {
  padding-right: 10px; }

.menuIcon {
  margin: auto auto -4px 30px; }

.menuIcon .line1, .line2, .line3 {
  width: 20px;
  height: 2px;
  background-color: #000;
  margin: 3px 0; }

a.current_page {
  padding-left: 0; }

.mainav li li {
  width: 100%;
  margin: 0; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="menu row align-items-center mx-auto d-flex justify-content-between">
      <div  class="col-md-3 px-0">
        <img src="img/Block 1 - Header/logo.png" alt="logo">
      </div>
      <nav class="mainav col-md-9 d-flex justify-content-end px-0">
        <ul>
          <li><a class="active nav_home current_page" href="index.html">Home</a></li>
          <li><a class="drop nav_pages" href="#">Pages <span class="arrow"></span></a>
          </li>
          <li><a class="drop nav_pages" href="#">Elements <span class="arrow"></span></a>
          </li>
          <li><a class="nav_product" href="#">Product</a></li>
          <li><a class="nav_blog" href="#">Blog</a></li>
          <li><a class="nav_work" href="#">Work</a></li>
          <li><a class="nav_startAproject" href="#">Start a project</a></li>
          
          
          
          <li  class="menuIcon">
            <div>
              <div class="line1"></div>
              <div class="line2"></div>
              <div class="line3"></div>
            </div>
          </li>
          
        </ul>
      </nav>
    </div>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

Ответы [ 2 ]

0 голосов
/ 10 мая 2018

Я не совсем уверен, что вы спрашиваете, но я верю, что вы ищете медиа-запрос для изменения масштаба для разных разрешений.Вы можете найти документацию для медиа-запросов здесь .

0 голосов
/ 09 мая 2018

Я думаю, что лучшее решение - это работать с% на ваших столбцах и, конечно, установить ширину основного деления на 100%. Я думаю, что это решение вашей проблемы, если вы это имеете в виду?

...