Question

我有一个带有居中徽标的导航栏，但我想不出如何摆脱徽标两侧的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>

Answer 1

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

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

Answer 2

删除.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>

Answer 3

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

如何从居中的导航栏徽标中删除边距，以提供更多链接空间

3 个答案: