如何将 bootstrap 导航栏的内容移动到中间？

Question

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

我不确定如何将“测试主页联系我们”移动到那条红线的开头。我尝试将 style="left:200px" 放入每个文本的 <a>...</a> 部分，但没有用。我正在使用 bootstrap 导航栏，所以我基本上只是从 bootstrap 复制并粘贴导航栏，下面是它的代码：

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

Answer 1

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

Answer 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

Answer 3

您必须为整个 nav 标签提供 padding-left。例如：

nav {
    padding-left: 200px;
}

如何将 bootstrap 导航栏的内容移动到中间？

How can I move the contents of a bootstrap navbar to the middle?

html

css

navbar

bootstrap-4