如何修复此基于 Bootstrap 5.2.0 的自定义面包屑中的箭头位置？

问题描述 投票：0回答：1

我创建了一个自定义 Bootstrap 5.2.0 面包屑，但是当我添加一个或多个面包屑的项目时，右箭头位于面包屑的项目框末尾之前

我创建了一个小提琴，所以我可以向您展示可能的错误

.breadcrumb.breadcrumb-custom {
     padding: 0 0;
    border-color: #dbe3e6;
}

.breadcrumb {
    border: 1px solid #f3f3f3;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item {
    font-size: 17px;
    background: #dbe3e6;
    padding: 8px 8px;
    color: #000;
}

 a:link{

    text-decoration: none;
} 


.breadcrumb.breadcrumb-custom .breadcrumb-item a {
    position: relative;
    color: inherit;
    border: 1px solid #dbe3e6;
    padding-left: 10px;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item a::before {
    right: -21px;
    z-index: 3;
    border-left-color: #dbe3e6;
    border-left-style: solid;
    border-left-width: 12px;

}

.breadcrumb.breadcrumb-custom .breadcrumb-item a::after {
    border-top: 21px solid transparent;
    border-bottom: 22px solid transparent;
    border-left: 12px solid #ffffff;
    top: -9px;
    right: -23px;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item:last-child {
    background: transparent;
        margin-left: 10px;
}

.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: 8px;
    color: #6c757d;
    content: "/";
}

.breadcrumb.breadcrumb-custom .breadcrumb-item::before {
    content: "";

}
.breadcrumb.breadcrumb-custom .breadcrumb-item a::before, 
.breadcrumb.breadcrumb-custom .breadcrumb-item a::after {
    position: absolute;
    top: -9px;
    width: 0;
    height: 0;
    content: "";
    border-top: 21px solid transparent;
    border-bottom: 21px solid transparent;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="page-content page-container" id="page-content">
    <div class="padding">
        <div class="row container">
            <div class="col-md-12">
                    <nav aria-label="breadcrumb">
                      <ol class="breadcrumb breadcrumb-custom">
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><span>Portfolio</span></li>
                      </ol>
                    </nav>
                    <nav aria-label="breadcrumb">
                      <ol class="breadcrumb breadcrumb-custom">
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
                        <li class="breadcrumb-item"><a href="#" data-abc="true">prova</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><span>user</span></li>
                      </ol>
                    </nav>
                    <nav aria-label="breadcrumb">
                      <ol class="breadcrumb breadcrumb-custom">
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Portfolio</a></li>
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Eventi</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><span>Santa Pasqua 2024</span></li>
                      </ol>
                    </nav>
                  </div>
                </div>
              </div>
            </div>

自定义 Bootstrap 5.2.0 面包屑导航

css bootstrap-5 breadcrumbs
1个回答
0
投票

覆盖元素 

float:left;
中的 
.breadcrumb.breadcrumb-custom .breadcrumb-item::before
，使其不再浮动，而是内联。

.breadcrumb.breadcrumb-custom {
  padding: 0 0;
  border-color: #dbe3e6;
}

.breadcrumb {
  border: 1px solid #f3f3f3;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item {
  font-size: 17px;
  background: #dbe3e6;
  padding: 8px 8px;
  color: #000;
}

a:link {
  text-decoration: none;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item a {
  position: relative;
  color: inherit;
  border: 1px solid #dbe3e6;
  padding-left: 10px;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item a::before {
  right: -21px;
  z-index: 3;
  border-left-color: #dbe3e6;
  border-left-style: solid;
  border-left-width: 12px;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item a::after {
  border-top: 21px solid transparent;
  border-bottom: 22px solid transparent;
  border-left: 12px solid #ffffff;
  top: -9px;
  right: -23px;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item:last-child {
  background: transparent;
  margin-left: 10px;
}

.breadcrumb-item+.breadcrumb-item::before {
  display: inline-block;
  padding-right: 8px;
  color: #6c757d;
  content: "/";
}

.breadcrumb.breadcrumb-custom .breadcrumb-item::before {
  content: "";
  float: none;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item a::before,
.breadcrumb.breadcrumb-custom .breadcrumb-item a::after {
  position: absolute;
  top: -9px;
  width: 0;
  height: 0;
  content: "";
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="page-content page-container" id="page-content">
  <div class="padding">
    <div class="row container">
      <div class="col-md-12">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb breadcrumb-custom">
            <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page"><span>Portfolio</span></li>
          </ol>
        </nav>
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb breadcrumb-custom">
            <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
            <li class="breadcrumb-item"><a href="#" data-abc="true">prova</a></li>
            <li class="breadcrumb-item active" aria-current="page"><span>user</span></li>
          </ol>
        </nav>
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb breadcrumb-custom">
            <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
            <li class="breadcrumb-item"><a href="#" data-abc="true">Portfolio</a></li>
            <li class="breadcrumb-item"><a href="#" data-abc="true">Eventi</a></li>
            <li class="breadcrumb-item active" aria-current="page"><span>Santa Pasqua 2024</span></li>
          </ol>
        </nav>
      </div>
    </div>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.