如何从居中的导航栏徽标中删除边距以给链接更多空间答案

【问题标题】：How to remove margin from centered navbar logo to give links more space如何从居中的导航栏徽标中删除边距以给链接更多空间
【发布时间】：2020-03-22 02:56:00
【问题描述】：

我有一个带有居中标志的导航栏，但我不知道如何去掉标志两侧的margin，我认为这是因为flex 将三个sections 平衡了nav?

这就是我所拥有的： Navbar with required sizes

是否可以在 CSS 中设置 % 大小或类似于 Bootstrap 的 col 大小，以便我可以拥有这样的东西；

  col-5   |  col-2  |    col-5

  links   |   logo  |    links

我尝试将图像的容器部分设置为特定大小或百分比，但这会使图像变小。

我有made a codepen here。

<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-no-bg" role="navigation">    
  <div class="collapse navbar-collapse w-100" id="top-navbar-1">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item mr-3">
        <a class="nav-link" href="<?php echo URLROOT; ?>/tours">Virtual 360° Tours</a>
      </li>
      <li class="nav-item mr-3">
        <a class="nav-link" href="<?php echo URLROOT; ?>/photos">Photography</a>
      </li>
      <li class="nav-item mr-3">
        <a class="nav-link" href="<?php echo URLROOT; ?>/photos">Photography</a>
      </li>
    </ul>
  </div>

  <section id="nav-logo-image" class="nav-logo center ">
    <a class="navbar-brand" href="<?php echo URLROOT; ?>">
      <img src="https://via.placeholder.com/300x55" class="img-fluid" alt="">
    </a>
  </section>

  <div class="collapse navbar-collapse w-100" id="top-navbar-1">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item mr-3">
        <a class="nav-link" href="<?php echo URLROOT; ?>/drones">Drone Photography</a>
      </li>
      <li class="nav-item mr-3">
        <a class="nav-link" href="<?php echo URLROOT; ?>/design">Web Design</a>
      </li>
      <li class="nav-item mr-3">
        <a class="nav-link" href="<?php echo URLROOT; ?>/design">Web Design</a>
      </li>
    </ul>
  </div> 

  <button class="navbar-toggler navbar-toggler-sm mr-4" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

【问题讨论】：

标签： html twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

删除 .center 类和徽标图像大小。您可能还想重组导航栏以在移动设备上获得正确的顺序和对齐方式。

简化为：https://codeply.com/p/XtQAeldyEX

<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-no-bg" role="navigation">
    <button class="navbar-toggler navbar-toggler-sm mr-4" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse w-100" id="top-navbar-1">
        <ul class="navbar-nav ml-lg-auto ml-3">
            ..
        </ul>
    </div>
    <section id="nav-logo-image" class="order-first order-lg-0 nav-logo">
        <a class="navbar-brand mx-3" href="<?php echo URLROOT; ?>">
            <img src="https://via.placeholder.com/300x55" class="img-flud" alt="">
        </a>
    </section>
    <div class="collapse navbar-collapse w-100" id="top-navbar-1">
        <ul class="navbar-nav mr-lg-auto ml-lg-0 ml-3">
            ..
        </ul>
    </div>
</nav>

【讨论】：

是否可以使用这种方法将链接均匀地分布到外边缘？

【解决方案2】：

这不是边距差距。您将徽标设置为与部分 div 对齐。这是因为徽标图像。该图像具有max-width: 100%，因此它会尝试在不改变图像纵横比（尺寸）的情况下适应给定的宽度。

尝试使用更大宽度的图像并将width: 100% 设置为锚标记。

【讨论】：

【解决方案3】：

您正在为一个可能将整个 div 分成三个相等部分的 flex 项目设置 width:100% 从 html 中删除 w-100 并从 .center 类中删除 width:100%，这应该会删除不需要的边距

【讨论】：