页面缩小时HTML区块尺寸异常求助（疑因header与nav导致）

问题说明 #

页面缩放时，header与nav区域的尺寸会随之缩小，已确认不是logo导致（logo固定为24px），问题出在header和nav部分。

相关HTML代码 #

<header>  
  <nav>
    <div class="container-fluid">
      <div class="row">
        <div class="col-2">
          <div class="logo">
            <a href="https://www.samsung.com/us/" target="_blank">
              <img
                src="../src/assets/img/gnb-desktop-120x32.png"
                alt="Samsung"
              />
            </a>
          </div>
        </div>
        <div class="col-9">
          <div class="navlist">
            <ul class="inner">
              <li>
                <button><span>Shop</span></button>
              </li>
              <li>
                <button><span>Mobile</span></button>
              </li>
              <li>
                <button><span>TV & Audio</span></button>
              </li>
              <li>
                <button><span>Appliances</span></button>
              </li>
              <li>
                <button><span>Computing</span></button>
              </li>
              <li>
                <button><span>Displays</span></button>
              </li>
              <li>
                <button><span>Accessories</span></button>
              </li>
              <li>
                <button><span>SmartThings</span></button>
              </li>
            </ul>
            <ul class="inner">
              <li>
                <button><span>Explore</span></button>
              </li>
              <li>
                <button><span>Support</span></button>
              </li>
              <li>
                <button><span>For Business</span></button>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-1">
          <ul class="tools">
            <li>
              <button>
                <span>
                  (search icon)
                </span>
              </button>
            </li>
            <li>
              <button>
                <span>
                  (shopping icon)
                </span>
              </button>
            </li>
            <li>
              <button>
                <span>
                  (user icon)
                </span>
              </button>
            </li>
            <li class="d-none">
              <button>
                <span>
                  (bars icon)
                </span>
              </button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</header>

问题原因 #

1. 栅格类无响应式断点：使用的col-2、col-9、col-1是全局比例栅格类，在任何屏幕宽度下都会强制按比例分配宽度，页面变窄时列宽会被强行压缩，导致整个nav容器缩小。
2. 导航内容未做响应式处理：navlist内的多组按钮文本在窄屏时没有换行或隐藏逻辑，内容挤压会进一步加剧容器收缩变形。

解决方案 #

1. 替换为响应式栅格类 #

把固定比例栅格类改成带断点的版本，避免小屏幕下过度压缩：

<!-- 修改后的栅格列 -->
<div class="col-sm-2 col-md-2">...</div>
<div class="col-sm-9 col-md-9">...</div>
<div class="col-sm-1 col-md-1">...</div>

2. 设置容器最小宽度 #

给header或外层容器添加最小宽度，防止页面缩小时整体收缩：

header {
  min-width: 1024px; /* 根据设计需求调整数值 */
}

3. 优化导航的响应式显示 #

在小屏幕下隐藏多余导航项，显示汉堡菜单：

@media (max-width: 991px) {
  .navlist .inner:first-child {
    display: none;
  }
  .tools .d-none {
    display: block !important;
  }
}

4. 给导航按钮设置最小宽度 #

避免按钮因文本挤压变形：

.navlist button {
  min-width: 90px; /* 根据按钮文本长度调整 */
}

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