css 如何设置面包屑样式以适合一行

31moq8wy 于 2022-12-15 发布在其他

关注(0)|答案(2)|浏览(158)

我在这里得到了面包屑的样式bootstrapmade.com
然而，我的代码中的问题是导航直接在标题之下而不是在同一行上，我如何实现这一点？
这是CSS

.breadcrumbs {
padding: 15px 0;
background: #2b2320;
min-height: 40px;
}

.breadcrumbs h2 {
    font-size: 28px;
    font-weight: 300;
    color: #fff;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    color: #ded5d2;
}

.breadcrumbs ol a {
    color: #fe825a;
}

.breadcrumbs ol li+li {
    padding-left: 10px;
}

.breadcrumbs ol li+li::before {
    display: inline-block;
    padding-right: 10px;
    color: #c8bab5;
    content: "/";
}

@media (max-width: 768px) {
    .breadcrumbs .d-flex {
        display: block !important;
    }

    .breadcrumbs ol {
        display: block;
    }

    .breadcrumbs ol li {
        display: inline-block;
    }
}

这是html

<section id="breadcrumbs" class="breadcrumbs">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <h2>Apply</h2>
                <ol>
                    <li><a href="/">Home</a></li>
                    <li><a href="/Careers">Careers</a></li>
                    <li>Apply</li>
                </ol>
            </div>
        </div>
    </section>

请帮助我尝试更改align-items-center到align-items-baseline，但没有帮助，我还尝试用class行将h2和ol Package 在一个div中，它也不起作用。在css中，我尝试了flex-direction行，它也不起作用

css

来源：https://stackoverflow.com/questions/74768463/how-do-i-style-my-breadcrumb-to-fit-in-one-line

2条答案

按热度按时间

6psbrbz91#

好的，在**".breadcrumbs .container〉div”**这个类中使用flex。在所有breadcrumbs内容显示在一行之后。

注：输出以全屏显示

.breadcrumbs {
  padding: 15px 0;
  background: #2b2320;
  min-height: 40px;
}

.breadcrumbs h2 {
    font-size: 28px;
    font-weight: 300;
    color: #fff;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    color: #ded5d2;
}

.breadcrumbs ol a {
    color: #fe825a;
}

.breadcrumbs ol li+li {
    padding-left: 10px;
}

.breadcrumbs ol li+li::before {
    display: inline-block;
    padding-right: 10px;
    color: #c8bab5;
    content: "/";
}

/* //CSS For set Breadcrumbs center on layout */

.breadcrumbs .container {
    padding: 0 15px;
}

.breadcrumbs .container > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .breadcrumbs .d-flex {
        display: block !important;
    }

    .breadcrumbs ol {
        display: block;
    }

    .breadcrumbs ol li {
        display: inline-block;
    }
}

<section id="breadcrumbs" class="breadcrumbs">
      <div class="container">
          <div class="d-flex justify-content-between align-items-center">
              <h2>Apply</h2>
              <ol>
                  <li><a href="/">Home</a></li>
                  <li><a href="/Careers">Careers</a></li>
                  <li>Apply</li>
              </ol>
          </div>
      </div>
</section>

赞(0）回复(0）举报 2022-12-15

cdmah0mi2#

I think you need to missed bootstrap cdn in your code that is why Breadcrumb is not in one line
样式表CDN：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

脚本文件CDN

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

在html文件中包含此cdn脚本链接将解决您的问题。

在`<head></head>`内添加样式表CDN

在`<body></body>`末尾添加脚本表CDN

使用以下代码

一个二个一个一个

赞(0）回复(0）举报 2022-12-15

我来回答

css 如何设置面包屑样式以适合一行

2条答案

在html文件中包含此cdn脚本链接将解决您的问题。

在`<head></head>`内添加样式表CDN

在`<body></body>`末尾添加脚本表CDN

使用以下代码

相关问题

热门标签

最新问答

css 如何设置面包屑样式以适合一行

2条答案

在html文件中包含此cdn脚本链接将解决您的问题。

在<head></head>内添加样式表CDN

在<body></body>末尾添加脚本表CDN

使用以下代码

相关问题

热门标签

最新问答

在`<head></head>`内添加样式表CDN

在`<body></body>`末尾添加脚本表CDN