时间戳

首页 > 解决方案 > 如何在 Booststrap 4 中集中导航选项卡/药丸？

html - 如何在 Booststrap 4 中集中导航选项卡/药丸？

问题描述

我想在 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>

有什么建议么 ？

标签： htmlcssbootstrap-4nav

解决方案

  1. 用于justify-content-center使nav列表内容居中。
  2. 用于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类之一来代替。

推荐阅读