Bootstrap 4 Navbar 在 CSS 中居中对齐

Question

我的 Angular 代码库中有一个 Bootstrap 4 导航栏，我希望它有点居中对齐，这样一旦我从一个菜单项移动到另一个菜单项，就不会有太大的间隙。

我在下面有我的 HTML、TS 和 CSS。

我的 HTML：

<nav class = "navbar navbar-expand-md navbar-fixed-top nav-border" role="navigation">
    <ul class="navbar-nav mx-auto" *ngFor="let menu of menus">
        <li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" data-target="{{menu.heading}}">{{menu.heading}}</a>
            <div class="dropdown-menu" aria-labelledby="{{menu.heading}}">
                <a *ngFor="let option of menu.options" href="{{option.link}}" target="_blank" class="dropdown-item">{{option.name}}</a>
            </div>
        </li>
    </ul>
</nav>

我的TS：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-top-menu',
  templateUrl: './top-menu.component.html',
  styleUrls: ['./top-menu.component.css']
})
export class TopMenuComponent implements OnInit {

  menus : any = [
    {
      
        heading: "MENU1",
        options: 
        [
          {name: "GOOGLE",link: "https://google.com/", order: 1},
          {name: "GitHub",link: "https://github.com", order: 2},
        ]
      
    }
  ];
  
  isDropdownOpen: boolean = false;
  constructor() { }

  ngOnInit(): void {
  }

}

我的CSS：

.navbar{
    padding:0px;
}
.nav-border {
    border-bottom:1px solid #ccc;
}
li { cursor: pointer; }

li:hover{
    background-color: black;
}

a {
    color: black;
}

.navbar-nav {
    padding: .9rem 0 0;
}

.nav-link:hover {color:white;}

.widthd{
    width: 100%;
}

我的屏幕：

现在菜单分散得很远，我希望它们离屏幕更近一点。

Answer 1

你可以试试这个：

<nav class = "navbar navbar-expand-md navbar-fixed-top nav-border" role="navigation">
  <div class="container"
    <ul class="navbar-nav mx-auto" *ngFor="let menu of menus">
        <li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" data-target="{{menu.heading}}">{{menu.heading}}</a>
            <div class="dropdown-menu" aria-labelledby="{{menu.heading}}">
                <a *ngFor="let option of menu.options" href="{{option.link}}" target="_blank" class="dropdown-item">{{option.name}}</a>
            </div>
        </li>
    </ul>
  </div>
</nav>

解决方案是将<div class="container"包裹在<ul></ul> 。 或者，如果您想将其自定义为更居中，您可以像这样添加 CSS：

.container-custom {
  width: 70%
}

然后您可以将container类更改为container-custom 。