Question

我很难将导航栏放到中心位置。我希望整个导航栏始终位于屏幕的底部，徽标位于中间位置，然后是两侧的两个按钮，横跨屏幕边缘。

以下是我目前的代码：

＆＃13;

.navigation {
  font-size: 40px;
  font-family: Roboto-Light;
  color: black;
}

＆＃13;

<nav class="navbar">
  <div class="container">
    <div class="navbar-nav nav-justified">
      <a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a>
      <a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a>
      <a class="navigation foleyLogo nav-item nav-link" href="#">
        <img src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" style="width:200px;" />
      </a>
      <a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a>
      <a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a>
    </div>
    <!-- navbar-nav -->
  </div>
  <!-- Container -->
</nav>
<!-- Navbar -->

＆＃13;

我的印象是，使用新的boostrap 4，使用nav-justified或nav-fill将为我完成工作，就像在教学视频中一样

Answer 1

Bootstrap 4有built in utilities你可以使用。

<div class="navbar-nav mx-auto">
    ...
</div>

例如，类mx-auto会在navbar-nav的x轴上添加自动边距，这应该使项目居中。

.navigation {
  font-size: 15px;
  font-family: Roboto-Light;
  color: black;
}

.navbar-nav {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
    <nav class="navbar navbar-toggleable-xl ">
      <div class="container">
        <div class="navbar-nav mx-auto">
          <a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a>
          <a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a>
          <a class="navigation foleyLogo nav-item nav-link" href="#">
            <img src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" style="width:100px;" />
          </a>
          <a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a>
          <a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a>
        </div>
        <!-- navbar-nav -->
      </div>
      <!-- Container -->
    </nav>

Answer 2

在@Brian的帮助下找到了答案！我在他的解决方案中添加了{flex-grow：3}，这有助于间距。然后，我宣布徽标图像的大小并使其成为一个内联块元素，并使整个navbar-nav与图片的行高相同。

解决方案代码如下:(缩放字体大小和图像大小以适应此处）

＆＃13;

.navigation {
  font-size: 15px;
  font-family: Roboto-Light;
  color: black;
}

.navbar-nav {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.navbar-nav a:nth-of-type(1) {
  flex-grow: 3;
}

.navbar-nav a:nth-of-type(2) {
  flex-grow: 3;
}

.navbar-nav a:nth-of-type(3) {
  flex-grow: 3;
}

.navbar-nav a:nth-of-type(4) {
  flex-grow: 3;
}

.navbar-nav a:nth-of-type(5) {
  flex-grow: 3;
}

img.foleyPerformance {
  display: inline-block;
  width: 100px;
}

.navbar-nav .nav-link {
  padding-top: 0;
  padding-bottom: 0;
  height: 100px;
  line-height: 100px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-toggleable-xl">
  <div class="container" style="margin-left:50px; margin-right:50px; width:100%;">
    <div class="navbar-nav mx-auto">
      <a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a>
      <a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a>
      <a class="navigation foleyLogo nav-item nav-link" href="#">
        <img class="foleyPerformance" src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" />
      </a>
      <a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a>
      <a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a>
    </div>
    <!-- navbar-nav -->
  </div>
  <!-- Container -->
</nav>
<!-- Navbar -->

＆＃13;

我的导航栏无法居中

2 个答案: