将导航栏居中：Bootstrap 4 [重复]

Posted 2023-03-06

【中文标题】将导航栏居中：Bootstrap 4 [重复]

【英文标题】：Centering a Navbar: Bootstrap 4 [duplicate]

【发布时间】：2019-11-11 07:50:38

【问题描述】：

我试图将导航栏中的项目居中，但无论我做什么，项目都粘在左边。在某一时刻，我可以通过在 ml-auto、mx-auto 和 mr-auto 之间切换，让它们都向右或向左移动半英寸。现在，即使我这样做，也没有任何动作。我不确定我做了什么。

我已经尝试了其他帖子中的几个代码示例，但它们都不起作用。我对代码比较陌生，所以我不确定发生了什么问题。

iv'e 尝试将 d-flex justify-content-center 添加到 navbar-collapse， 证明内容以 div 为中心“折叠导航栏折叠”以及其他帖子中建议的其他一些内容。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="img/logo3.png" style="width:13%;" ;></a>

    <button class="navbar-toggler" type="button" data- toggle="collapse" data-target="#navbarResponsive">
    		 <span class="navbar-toggler-icon"></span>
    	        </button>
    <div class="collapse navbar-collapse d-flex justify-content-center" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

据我所知，我的 CSS 目前没有针对导航的内容。

我只想要导航栏中间的导航项目。

【参考方案1】：

从ul 标记中删除ml-auto CSS 类。

在CSS中添加这个

.navbar-brand 
   position: absolute !important;

【讨论】：

codepen working demo

感谢您的回复。删除 ml-auto 会将所有内容向左移动一英寸，但仍位于页面的最左侧。

代替ml-auto试试mx-auto

不幸的是没有任何改变..

你检查过我在之前评论中添加的 codepen 演示

【参考方案2】：

这对我有用：<div class="collapse navbar-collapse d-flex" id="navbarResponsive"> 和 <ul class="navbar-nav mx-auto">。

/* Nesessary for the logi i use
    You might not need it
*/
.navbar-brand img 
  width: 64px;
  height: auto;


/* To keep the nav items
* centered and full width
* on mobile phones
*/

@media (max-width: 575px)   
 .navbar-nav 
    width: 100%;
  
  .navbar-nav li 
    text-align: center;
  

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="https://i.stack.imgur.com/SENHZ.png" ;></a>

    <button class="navbar-toggler" type="button" data- toggle="collapse" data-target="#navbarResponsive">
    		 <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse d-flex" id="navbarResponsive">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

【讨论】：

不幸的是，这并没有解决它。物品不动。

@jay777 复制并粘贴我发布的代码。您忘记在您的邮箱中关闭<ul>。我已对您的代码进行了编辑。你应该接受它。

很抱歉，您的代码确实有效，但由于某种原因，它仅在我删除左角的徽标时才有效。当我断开图像链接时，列表项居中，但我需要将徽标放在角落。

@jay777 在这里，我也添加了一个标志。

您的徽标尺寸是多少？