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-500px，w-25或w-50类之一，而不是w-75。

如何在Booststrap 4中集中导航标签/药片？

1 个答案: