Bootstrap相关问题：为何Div元素无响应式效果？

嘿，我来帮你搞定这个响应式间距的问题！你现在遇到的核心问题是Bootstrap的栅格系统是断点触发式的，没法直接实现间距从226px平滑过渡到0的效果。咱们可以通过调整布局结构+CSS过渡来实现这个需求，具体方案如下：

核心思路 #

放弃使用Bootstrap的col-md-3和col-md-9栅格类（这类栅格是断点切换，没有渐变过渡效果），改用自定义flex布局，结合CSS transition属性让间距在屏幕缩小过程中平滑变化，同时保留小屏幕的可用性。

修改后的完整代码 #

HTML部分 #

<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">
  <div class="logo-container px-0">
    <img src="img/Block 1 - Header/logo.png" alt="logo">
  </div>
  <nav class="mainav 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://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

CSS部分 #

.menu {
  max-width: 960px;
  background-color: #e668b1;
  justify-content: space-between;
}

.logo-container {
  border: 1px solid red;
  width: 240px; /* 和原col-md-3在960px容器中的宽度一致 */
  flex-shrink: 0; /* 防止Logo容器被压缩变形 */
}

.mainav {
  border: 1px solid red;
  margin-left: 226px; /* 初始状态下的间距 */
  flex: 1;
  display: flex;
  justify-content: flex-end;
  transition: margin-left 0.3s ease; /* 添加过渡动画 */
}

/* 屏幕从960px缩小到768px时，间距逐渐从226px变为0 */
@media (max-width: 960px) {
  .mainav {
    /* 通过calc计算线性变化的间距，192是960-768的差值，保证比例正确 */
    margin-left: calc((960px - 100vw) * (226 / 192));
  }
}

/* 屏幕小于等于768px时，间距归零，菜单堆叠显示 */
@media (max-width: 768px) {
  .mainav {
    margin-left: 0;
    flex-wrap: wrap;
  }
  .mainav ul {
    width: 100%;
  }
  .mainav li {
    display: block;
    width: 100%;
  }
}

/* 保留你原有的其他样式 */
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; }

关键调整说明 #

1. 移除栅格类：把col-md-3和col-md-9换成自定义容器，避免栅格的断点式切换限制。
2. 动态间距计算：用calc()函数在960px到768px的屏幕区间内，让间距线性从226px减小到0，实现平滑过渡。
3. 过渡动画：给mainav的margin-left添加transition，让间距变化过程更自然。
4. 小屏幕适配：在768px以下让菜单堆叠显示，保证移动端的可用性。

这样调整后，你缩小屏幕时就能看到Logo和菜单之间的间距从226px逐渐平滑变为0的效果啦！

内容的提问来源于stack exchange，提问作者user9727069