упорядоченный список с помощью начальной загрузки css - PullRequest
Новая
       35

упорядоченный список с помощью начальной загрузки css

0 голосов
/ 15 марта 2019

Я гуглял и просматривал предлагаемые ссылки, прежде чем опубликовать вопрос, но у меня ничего не получилось.

У меня есть навигационное меню, которое я хочу центрировать на странице.Я использую загрузчик CSS.Я пытался изменить определения .nav, ol и хлебные крошки ... но они не дали никакого эффекта.Я могу получить навигацию по центру, если я использую автономный CSS, но не пытаясь включить изменения в готовый файл начальной загрузки.

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, потому что его здесь слишком много, но я создал дубликат на моем сервере, который я могу редактировать и использовать.)

Ответы [ 2 ]

1 голос
/ 15 марта 2019

Если я правильно понял вопрос, вы должны удалить свой CSS и просто применить class: 'text-center' к элементу nav.

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

0 голосов
/ 15 марта 2019

Надеюсь, это то, что вы ищете. 

.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>
...