将 Logo 置于导航栏中的中间

Question

I am Struggling to position the logo in the middle of navbar , and having elements spreading out from the logo on the left and right.我正在努力将徽标定位在 navbar 的中间，并且元素从左侧和右侧的徽标散开。 I also want to push the buttons in the end of the nav bar.我还想按下导航栏末尾的按钮。

this is the ideal positioning In my code, i tried to create two column inside the nav bar.这是理想的定位在我的代码中，我尝试在导航栏内创建两列。 with one taking up 80% width which stores 5 elements, and the other taking up 20% width for the buttons at the end.其中一个占 80% 的宽度，用于存储 5 个元素，另一个占最后按钮的 20% 的宽度。 I am not sure which is the best way to do this.我不确定哪种方法是最好的方法。

<nav class="navbar navbar-expand-md navbar-dark bg-dark py-3">
    <ul class=" col-sm-10 navbar-nav justify-content-center">
        <li class="nav-item"><a href="#" class="nav-link">Products</a></li>
        <li class="nav-item"><a href="#" class="nav-link">My Products</a></li>

        <li><img src="../../assets/KLion.jpg" alt="logo" style="width:70px; height:50px;"></li>
        <li class="nav-item"><a href="#" class="nav-link">About KLion</a></li>
        <li class="nav-item"><a href="#" class="nav-link">News & Updates</a></li>

    </ul>
    <ul class=" col-sm-1 navbar-nav justify-content-between py-3 ">

        <button type="button" class="btn">
            <img src="../../assets/Group 1.png" alt="logo" style="width:80px; height:20px;">
        </button>
        <button type="button" class="btn">
            <img src="../../assets/shopping-cart@2x.png" alt="logo" style="width:20px; height:20px;">
        </button>
    </ul>

</nav>
.navbar-nav > li{
  margin-left: 130px;
}

Answer 1

I hope this will help you我希望这能帮到您

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="navbar-left"><a href="#">Left 1</a></li>
      <li class="navbar-left"><a href="#">Left 2</a></li>
      <li class="active"><a href="#" class="nav-link">Products</a></li>
      <li class=""><a href="#" class="nav-link">My Products</a></li>
      <li><img src="your_img_path" alt="logo" style="width:70px; height:50px;"></li>
      <li class=""><a href="#" class="nav-link">About KLion</a></li>
        <li class=""><a href="#" class="nav-link">News & Updates</a></li>

      <li class="navbar-right"><button type="button" class="btn">
            <img src="../../assets/Group 1.png" alt="logo" style="width:80px; height:20px; ">
        </button></li>
      <li class="navbar-right"  style="margin-right: 20px;"><button type="button" class="btn">
            <img src="../../assets/shopping-cart@2x.png" alt="logo" style="width:20px; height:20px;">
        </button></li>
    </ul>
  </div>
</nav>

@media (min-width: 768px) {
  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-nav > li {
    float: none;
    display: inline-block;
  }
  .navbar-nav > li.navbar-right {
    float: right !important;
  }
}

Thanks谢谢

Answer 2

You can try this, if you are expecting something similar and position it in the appropriate tag inside the style block using margin and adjust the button size using padding.你可以试试这个，如果你期待类似的东西，并使用边距将它放置在样式块内的适当标签中，并使用填充调整按钮大小。

<html>
    <head></head>
<style>
    .navbar-nav > a{
        margin-left: 50px;
    }
    img{
        margin-left: 50px;
    }
</style>
    <body>
        <nav class="navbar navbar-expand-md navbar-dark bg-dark py-3">
            <div class=" col-sm-10 navbar-nav justify-content-center">
                <a href="#" class="nav-link">Products</a></li>
                <a href="#" class="nav-link">My Products</a></li>
                <img src="../../assets/KLion.jpg" alt="logo" style="width:70px; height:50px;"></li>
                <a href="#" class="nav-link">About KLion</a></li>
                <a href="#" class="nav-link">News & Updates</a></li>
                <button type="button" class="btn">
                    <img src="../../assets/Group 1.png" alt="logo" style="width:80px; height:20px;">
                </button>
                <button type="button" class="btn">
                    <img src="../../assets/shopping-cart@2x.png" alt="logo" style="width:20px; height:20px;">
                </button>
            </div>
        </nav>
    </body>
</html>

Answer 3

.navbar{
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
  width:100%;
}
.navbar ul:first-child{
  margin-left:20%;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  width:60%;
}
.navbar ul:last-child{
  width:20%;
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
}

https://codepen.io/infasyskey/pen/jOEojEQ https://codepen.io/infasyskey/pen/joEojEQ

将 Logo 置于导航栏中的中间

问题描述

3 个解决方案

解决方案1
1 2020-01-30 09:37:26

解决方案2
0 2020-01-30 09:37:56

解决方案3
0 已采纳 2020-01-30 09:53:43

将 Logo 置于导航栏中的中间

问题描述

3 个解决方案

解决方案1 1 2020-01-30 09:37:26

解决方案2 0 2020-01-30 09:37:56

解决方案3 0 已采纳 2020-01-30 09:53:43

解决方案1
1 2020-01-30 09:37:26

解决方案2
0 2020-01-30 09:37:56

解决方案3
0 已采纳 2020-01-30 09:53:43