gpt4 book ai didi

css - 使用 bootstrap css 中心导航面包屑有序列表

转载 作者:太空宇宙 更新时间:2023-11-04 06:24:39 25 4
gpt4 key购买 nike

在发布问题之前,我一直在谷歌搜索并查看建议的链接,但我没有得到任何工作。

我有一个现有的导航菜单,我想将其置于页面中央。我正在使用 Bootstrap css。我试过更改 .nav 定义、ol 和面包屑……但它们没有任何效果。如果我使用独立的 css,我可以让导航居中,但不能通过尝试将更改合并到预制的 bootsrtrap 文件中。

HTML

<head>
<title>Title</title>
<link rel="stylesheet" href="CSS/csstest.css">
</head>

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
<li class="breadcrumb-item active" aria-current="page">Submissions</li>
<li class="breadcrumb-item active" aria-current="page">Reports</li>
<li class="breadcrumb-item active" aria-current="page">Database</li>
<li class="breadcrumb-item active" aria-current="page">Register</li>
<li class="breadcrumb-item active" aria-current="page">Log Out</li>
</ol>
</nav>

独立的 CSS

.breadcrumb{
padding:8px 15px;
text-align: center;
margin-bottom:20px;
list-style:none;
background-color:#f5f5f5;
border-radius:4px
}
.breadcrumb>li{
display:inline-block
}
.breadcrumb>li+li:before{
padding:0 5px;
color:#ccc;
content:"/\00a0"
}
.breadcrumb>.active{
color:#777
}
.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}

Boostrap CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

(我链接了 CSS,因为放在这里太多了。但我在我的服务器上创建了一个副本,我可以编辑和使用。)

最佳答案

如果我答对了,你应该删除你的 css 并在导航元素上应用 class: 'text-center'。

https://stackblitz.com/edit/typescript-jznms2?embed=1&file=index.html

关于css - 使用 bootstrap css 中心导航面包屑有序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55185939/

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