时间戳

首页 > 解决方案 > Bootstrap - 如何在导航栏中使用相等的宽度？

javascript - Bootstrap - 如何在导航栏中使用相等的宽度？

问题描述

我正在使用 Django/Python 中的 Bootstrap。我在导航栏中使用等宽时遇到问题。

我已经在我的菜单中设置了折叠配置。但我似乎无法在折叠之前对其项目应用相等的宽度。我希望菜单项的宽度相等并位于页面的中心，但它们位于左侧。

我该如何解决？

HTML：

    <nav class="navbar navbar-expand-sm">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu-collapse">
        <span class="navbar-toggler-icon"></span>
      </button>
        <div class="collapse navbar-collapse" id="menu-collapse">
          <ul class="navbar-nav text-center" aria-expanded>
            <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Contact us</a></li>
          </ul>
        </div>
    </nav>

标签： javascripthtmlcsstwitter-bootstrap

解决方案

我建议您使用引导网格系统（见此处：https ://getbootstrap.com/docs/4.0/layout/grid/ ）您可以为每个列表元素指定 col-10 和 offset-1 类。这将使它们都具有相同的宽度，并在页面中间稍微居中。

如果你想让它们更小，你也可以给它们 col-6 和 3 例如的偏移量。

如果您希望它们是全宽的，只需给它们 col-12 类或仅与 col 均匀间隔。

您还可以根据断点/窗口 res 使用 col-12 col-md-8 offset-md-2 之类的类（在移动设备上为全宽，然后在较大的显示器上较窄但以较大的显示器为中心）使它们具有不同的大小。

推荐阅读