gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 01:33:04 26 4
gpt4 key购买 nike

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

有什么建议吗?

最佳答案

  1. 使用 justify-content-centernav 列表的内容居中。
  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-25w-50w-75 之一来代替 w-500px 类。

关于html - 如何在 Bootstrap 4 中集中导航选项卡/药丸?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50854726/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com