Question

我正在尝试将徽标放在导航栏上居中，但它总是向左粘贴。是否有任何方法可以通过引导程序类解决此问题？

导航栏在左侧包括一个下拉切换按钮，在中央是徽标，在右侧包括两个按钮（登录并创建帐户）。我已经尝试了使用margin-left，mx-auto和绝对定位的各种尝试，但是都无济于事，我需要一种在屏幕折叠时也能起作用的解决方案。

HTML

<div class="pos-f-t">
    <div id="outter" style="width:100%">
        <nav id="mainnavbar" class="navbar sticky-top navbar-dark bg-dark">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <h3 id="logo">Logo</h3>
          <form class="form-inline my-2 my-lg-0">
            <b-link to="/login"><b-button id="login" class="navbarbutton" variant="outline-success">Log In</b-button></b-link>
            <b-link to="/create"><b-button class="navbarbutton" variant="outline-success">Create Account</b-button></b-link>
          </form>
        </nav>
    </div>
<!--...#navbarToggleExternalContent-->
</div><!--end pos-f-t-->

CSS

#logo{
 /* margin-left: 10%;*/
  margin-bottom: 0;
  padding-bottom: 3px;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#login{
  margin-right: 10px;
}

我希望每个元素在宽屏上以及在折叠时都等距分布。取而代之的是，当显示狭窄且徽标略微留在左侧时，元素会重新排列自己。我还试图避免使用绝对定位解决方案，因为在狭窄的显示器上会出现重叠。

Answer 1

您始终可以使用padding-left或padding-right并进行尝试。我一直喜欢做的是使用position:absolute，然后，我可以使用代码top: "number" "px" right; left:，直到发现正确为止，您都必须使用数字。我也是一个新学习者，所以不能告诉你太多。

Answer 2

由于使用flexbox，如果由于最右边的元素而没有足够的空间，则中间的元素将向左移动。

要使元素居中，您仍然可以在父元素上使用position: absolute和position: relative，就像下面的代码片段一样。

请谨慎使用，因为如果窗口的宽度太小，元素将重叠。

#logo {
  /* margin-left: 10%;*/
  margin-bottom: 0;
  padding-bottom: 3px;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#login {
  margin-right: 10px;
}

nav {
  position: relative;
}

nav h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="pos-f-t">
  <div id="outter" style="width:100%">
    <nav id="mainnavbar" class="navbar sticky-top navbar-dark bg-dark">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <h3 id="logo">Logo</h3>
      <form class="form-inline my-2 my-lg-0">
        <b-link to="/login">
          <b-button id="login" class="navbarbutton" variant="outline-success">Log In</b-button>
        </b-link>
        <b-link to="/create">
          <b-button class="navbarbutton" variant="outline-success">Create Account</b-button>
        </b-link>
      </form>
    </nav>
  </div>
  <!--...#navbarToggleExternalContent-->
</div>
<!--end pos-f-t-->

Answer 3

您可以尝试将汉堡包，徽标和按钮包装在各自的div中。

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>


  <body>
    <nav class="navbar sticky-top navbar-dark bg-dark">
      <div class="col-md-4 col-sm-4">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>

      <div class="col-md-4 col-sm-4 text-center">
        <h3>Logo</h3>
      </div>

      <div class="col-md-4 col-sm-4">
        <form class="text-right">
          <a class="btn btn-primary">Login</a>
          <a class="btn btn-primary">Create</a>
        </form>
      </div>
    </nav>
  </body>
</html>

编辑：您可以将col-md-4或col-lg-4或col-whateverScreenSize-4添加到每个div ...

如何在导航栏中平均间隔元素

3 个答案: