时间戳

首页 > 解决方案 > 引导程序。为什么div没有响应？

html - 引导程序。为什么div没有响应？

问题描述

我做了一个没有引导程序 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">&lt;/span></a>
          </li>
          <li><a class="drop nav_pages" href="#">Elements <span class="arrow">&lt;/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>

标签： htmlcsstwitter-bootstrapgridalignment

解决方案

我认为最好的解决方案是在你的列上使用 % ，当然将你的主 div 的宽度设置为 100%。如果这是您的意思，我认为这是您问题的解决方案？

推荐阅读