如何居中导航栏项目？ （响应地）

Question

尝试了很多事情，但没有任何效果。希望你们能帮助我。 我的导航栏如下所示：

    .navbar-nav{
    	float: left;
    	
    }
    
    .navbar img{
    	width: 35px;
    }
    
    #navi{
    	position: fixed;
    	width: 100%;
    	 z-index:1;
    }
    
    .navbar a{
    	font-size: 25px;
    	
    }
    
    .navbar{
    	background-color: #000000;
    }
    
    .halter{
    	padding: 5px;
    }
    
    .navbar-toggler{
    		
    }
    
    .navbar-brand{
    	margin-left: 12px;
    	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
    }

<nav class="navbar navbar-expand-lg navbar navbar-light" style="background-color: #FFFFFF"> 
      <img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1"> 
       <a data-scrol class="navbar-brand" href="#text1"> 
       <span class="prwaldbrand">Projekt&nbsp; <span class="secondword">Waldbrand</span></span>
       </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
        <span class="navbar-toggler-icon"></span> </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Film</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Info</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Über uns</a> </li>
          </ul>
        </div>
      </nav>

我希望 ul 中的 li 元素响应性地位于导航栏的中央。无法找到解决方案。

谢谢。

Answer 1

您需要添加此CSS：

#navbarNav{justify-content:center;}

您将如何自己解决这个问题？

1. 了解该引导程序为您提供了所有类和css，但是它被设计为 在需要时被覆盖

2. 在Chrome浏览器中：

   a。右键单击看起来不合适的区域。

   b。从弹出的上下文菜单中选择“检查”

   c。最大化DevTools面板。左侧是组成页面的HTML；右侧是左侧当前突出显示的元素的CSS。试试吧！

/*
  You need this at FULL SCREEN to see the effect (top right link)
  The fix is: .navbar-nav{justify-content:center;}
*/

.navbar-nav{}
.navbar img{width:35px;}
#navi{position:fixed;width:100%;z-index:1;}
.navbar a{font-size:25px;}
.navbar{background-color:#000000;}
.halter{padding:5px;}
.navbar-toggler{}
.navbar-brand{margin-left:12px;font-family:Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";}

/* ADD THIS */
#navbarNav{justify-content:center;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar navbar-light" style="background-color: #FFFFFF"> 
      <img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1"> 
       <a data-scrol class="navbar-brand" href="#text1"> 
       <span class="prwaldbrand">Projekt&nbsp; <span class="secondword">Waldbrand</span></span>
       </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
        <span class="navbar-toggler-icon"></span> </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Film</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Info</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Über uns</a> </li>
          </ul>
        </div>
      </nav>

Answer 2

您需要在 ul 和 li

中应用css

.navbar-nav{
    float: left;
}
.navbar-nav ul {
    float: left;
}
.navbar-nav ul li{
    float: left;
}