如何将引导导航栏的内容移动到中间？答案

【问题标题】：How can I move the contents of a bootstrap navbar to the middle?如何将引导导航栏的内容移动到中间？
【发布时间】：2022-01-23 08:44:16
【问题描述】：

我正在尝试制作一个简单的导航栏，并且我希望将导航栏的内容（例如“主页”和“联系人”）向右移动一点，以便它也适用于移动用户。这就是我的导航栏的样子，我画的红线代表我希望“测试”开始的位置。

我不确定如何将“Test Home Contact Us”移到该红线的开头。我尝试将style="left:200px" 放在每个文本的<a>...</a> 部分中，但它不起作用。我正在使用引导导航栏，所以我基本上只是从引导中复制并粘贴了一个导航栏，这是它的代码：

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="{{ url_for('home_page') }}"><b>Test</b></a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNav"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="{{ url_for('home_page') }}"
              >Home <span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="market">Contact Us</a>
          </li>
        </ul>
      </div>
    </nav>

【问题讨论】：

标签： html css bootstrap-4 navbar

【解决方案1】：

您可能正在寻找style="padding-left: 200px;" 而不是left。

【讨论】：

您是否碰巧知道如何让它响应并合并百分比？最好是 67%，因为这是中间的黑色条带占多少 %。不管怎样，谢谢
百分比工作正常，只需将 200px 替换为 10% 或类似名称。您可以在 CSS 样式表中使其响应（使用媒体查询），但我不知道任何引导程序特定的方式（使用它们的预定义类）来真正做这么大的填充。您可能需要从更高级别的 pov 重新考虑整体布局。 flexboxes（其中 navbar 是一种实现，但 bootstrap 有其他容器）支持许多不同的方式来实现您可能追求的结果。

【解决方案2】：

只需在<nav> 标记旁边添加一个container div 就会有所帮助。

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="{{ url_for('home_page') }}"><b>Test</b></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="{{ url_for('home_page') }}">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="market">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

来源：https://getbootstrap.com/docs/4.6/layout/overview/#containers

【讨论】：

【解决方案3】：

您必须将padding-left 分配给整个navtag。例如：

nav {
    padding-left: 200px;
}

【讨论】：