Question

我是CSS和Bootstrap的初学者，无法更改bootstrap css，因此无法在导航栏中将文本居中。我正在为网站的导航栏工作，当屏幕尺寸减小时，它会变成插入符号。

我花了一个多小时的时间来寻找应该更改的班级/属性，但无济于事。我发现当我更改“ .navbar-collapse”并添加“ text-align：center”时，它会将文本更改为居中，但仅在屏幕尺寸较小时才更改。当屏幕尺寸大于“ navbar-expand-sm”时，我不知道如何居中。

<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
     <button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
         <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="collapse_target">
         <span class="navbar-text">madlee</span>
         <ul class="navbar-nav">
             <li class="nav-item dropdown">
                 <a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="dropdown_target" href="#">
                     Work History
                     <span class="caret"></span>
                 </a>
                 <div class="dropdown-menu" aria-labelledby="dropdown-target">
                     <div class="dropdown-divider" href="#"></div>
                 </div>
             </li>
             <li class="nav-item">
                 <a class="nav-link" href="#">Resume</a>
             </li>

         </ul>
     </div>
 </nav>

我一直试图使导航栏中的所有文本都位于屏幕中央，而不是左侧。

Answer 1

您可以尝试在主导航栏中添加其他样式

.navbar {
    display: flex;
    justify-content: center;
}

Answer 2

打开您的CSS文件并添加此行

ul { margin: auto !important;}

Answer 3

您经历过这些Bootstrap tutorials吗？他们拥有格式良好且维护良好的文档。但是，如果您不想去那里，请在此处清除一些要点。

您的代码完全正确，没有错误。
您需要一点CSS知识，只需添加三行代码即可。这是：

ul {
  margin: auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
  <button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
         <span class="navbar-toggler-icon"></span>
     </button>
  <div class="collapse navbar-collapse" id="collapse_target">
    <span class="navbar-text">madlee</span>
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="dropdown_target" href="#">
                     Work History
                     <span class="caret"></span>
                 </a>
        <div class="dropdown-menu" aria-labelledby="dropdown-target">
          <div class="dropdown-divider" href="#"></div>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Resume</a>
      </li>

    </ul>
  </div>
</nav>

已编辑

上面的代码可以工作，但是有多种方法可以实现。我刚刚说了一个明显的话。是的，很重要的一点将有助于覆盖它所隐含的任何其他CSS。

您可能想在这里购买CSS快速入门：Link

很乐意提供帮助：）

无法弄清楚如何编辑此引导CSS

3 个答案: