引导程序。为什么div没有响应？答案

【问题标题】：Bootstrap. Why div isn't responsive?引导程序。为什么div没有响应？
【发布时间】：2018-10-20 00:04:05
【问题描述】：

我在没有引导程序 4 的情况下制作了一个菜单。我正在查看工作的结果，我想这不是响应式设计。我想知道如何使左侧徽标和右侧菜单之间的空间（大约226px）从 226 变为 0，而屏幕会下降。

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

【问题讨论】：

您在这里的预期结果是什么？查看您的代码，您正在应用很多的 Bootstrap 实用程序类，完全忽略了 Bootstrap 具有内置导航组件，然后通过自定义 CSS 覆盖您正在应用的一些实用程序类。

标签： html css twitter-bootstrap grid alignment

【解决方案1】：

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

【讨论】：

【解决方案2】：

我不完全确定您在问什么，但我相信您正在寻找的是一个媒体查询来更改不同分辨率的缩放比例。你可以找到媒体查询的文档here。

【讨论】：