如何在我的引导导航栏上居中徽标 [重复]

Question

我正在尝试在导航栏的中心位置放置一个徽标。导航栏会自动拉伸到与我不想要的图像相同的大小。如何在导航栏上放置与导航栏重叠/不拉伸的徽标？

        <nav class="navbar navbar-expand-lg navbar-light bg-light">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mx-auto ">
      <li class="nav-item active ">
        <a class="nav-link " href="#">Home <span class="sr-only">(current)</span></a>
      </li>

      <div class="navbar-brand">
        <img src = "test-logo.png" height="250" width="250" alt="test logo">
      </div>

      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>


    </ul>



  </div>
</nav>

Answer 1

您好，这里是您的问题的示例代码..

.navbar-brand {margin: 0 30px;padding: 0;}
.navbar-brand img {max-height: 68px;}
nav.navbar .navbar-nav li a {
  padding: 0 20px;
  line-height: 68px;
}

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


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="navbar-brand d-block d-md-none">
          <img src="https://www.jing.fm/clipimg/full/135-1359070_test-logos-full-logo-with-text-and-simple.png" width="60px" alt="logo" />
        </div>
        
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mx-auto ">
        <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="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="#">Services</a>
        </li>
  
        <div class="navbar-brand d-none d-md-block">
          <img src="https://www.jing.fm/clipimg/full/135-1359070_test-logos-full-logo-with-text-and-simple.png" alt="logo" />
        </div>
  
        <li class="nav-item">
          <a class="nav-link" href="#">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">career</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
  
  
      </ul>
  
  
  
    </div>
  </nav>
  
  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>