如何在 Bootstrap 4 中集中导航 tabs/pills？

Question

我想在 Bootstrap 4 中将一些选项卡集中在导航栏上，但似乎没有任何效果。另外，我无法缩短选项卡下的行，如果您也能给我一些提示，我将不胜感激。提前致谢。

我的代码：

.nav-tabs>li,
.nav-pills>li {
  float: none;
  display: inline-block;
  *display: inline;
  /* ie7 fix */
  zoom: 1;
  /* hasLayout ie7 trigger */
}

.nav-tabs,
.nav-pills {
  text-align: center;
}

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Registration</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="stylesheets/asd.css">
  <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
  </script>
</head>

<body>

  <ul class="nav nav-tabs">
    <li class="nav-item"><a data-toggle="tab" class="nav-link active" href="#student">Student</a></li>
    <li><a data-toggle="tab" class="nav-link" href="#teacher">Teacher</a></li>
  </ul>

</body>

</html>

有什么建议吗？

Answer 1

使用justify-content-center使nav列表的内容居中。
使用mx-auto使自己居中。 mx-auto 仅当您使用它的元素的宽度小于其父元素的宽度时才有效，如本例所示 500px

.w-500px {
  width: 500px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />


<ul class="nav nav-tabs justify-content-center mx-auto w-500px">
  <li class="nav-item"><a data-toggle="tab" class="nav-link active" href="#student">Student</a></li>
  <li><a data-toggle="tab" class="nav-link" href="#teacher">Teacher</a></li>
</ul>

您可以使用 w-25、w-50 或 w-75 类.

之一来代替 w-500px

如何在 Bootstrap 4 中集中导航 tabs/pills？

How to centralize nav tabs/pills in Booststrap 4?

html

css

nav

bootstrap-4