时间戳

首页 > 解决方案 > 我想在左侧设置徽标，在右侧设置链接，但浮动在导航标签上不起作用......为什么？

html - 我想在左侧设置徽标，在右侧设置链接，但浮动在导航标签上不起作用......为什么？

问题描述

我使用此代码进行导航，并使用引导程序进行练习 

<!DOCTYPE html>
  <html lang="fa">
    <head>
        <meta charset="UTF-8">
        <title>welcome to your site</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.4.1.slim.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>
    </head>
    <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#"><img src="img/mehrlogo.png" width="120" alt=""></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="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>
    </body>
    </html>

如何在右侧或左侧设置徽标，在另一侧设置链接？

默认情况下，链接和徽标彼此靠近，并且向左或向右浮动不起作用 - 我该怎么办？

标签： htmlcsswebbootstrap-4

解决方案

用于定位其元素的.navbar用途。display: flex这意味着您可以通过更改flex-directionand justify-contenton重新定位或排列它们，.navbar但还要注意flex-grow,flex-shrink和flex-basis. 的每个直接子级上设置的左右边距.navbar。

从左到右开始flex-direction: row（默认）。从右到左：flex-direction: row-reverse。

在重新排列它们之间和周围的空间方面，对于上述任何一个，更改justify-content为space-between（默认）、space-evenly、flex-end、flex-start、中的任何一个center。

这是一个以相反顺序且均匀分布的示例：

nav.navbar {
  flex-direction: row-reverse;
  justify-content: space-evenly;
}
div.navbar-collapse {
  flex-grow: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.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>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">LOGO HERE</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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

注意事项：在父级或任何子级上设置的更多属性会影响它们的显示行为。一些最常见的：

  • 设置margin: auto在任何孩子身上都会偷走所有积极的空间并将其分配给那个特定justify-content的差距，看起来它不起作用。它正在工作，但它准确地分配了0空间。如果要将可用空间划分为几个选定的间隙，请margin:auto使用任何相邻元素在每个间隙中放置 a。
  • 设置flex-grow，flex-shrink或flex-basis任何孩子都会影响他们的大小，从而影响可用空间的分布。这里的一个子注释是，默认情况下，在某些响应时间间隔.navbar-collapse上flex-grow: 1，您需要将其设置0为能够重新分配可用空间。否则没有可用空间。

推荐阅读