Question

在发布问题之前，我一直在谷歌搜索并查看建议的链接，但是我什么都没做。

我有一个想要在页面上居中的导航菜单。我正在使用引导CSS。我尝试更改.nav定义，ol的定义和面包屑....但是它们没有任何作用。如果使用独立的CSS，则可以使导航居中，但不能尝试将更改合并到预制的bootstrap文件中。

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，因为它放置在这里太多了。但是我已经在服务器上创建了一个副本，可以编辑和使用。）

Answer 1

如果我的问题正确，则应该删除CSS，然后在nav元素上应用类：“ text-center”。

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

Answer 2

希望这就是您想要的。

.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 4px;
  text-align: center;
  display: block !important;
}

.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;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<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的有序列表

2 个答案: