Question

我是新来的bootstrap并试图设计面包屑的样式。我尝试了这个，它给了我想要的正确的内联布局。

    <div class="BreadCrumbs">
          <a href="www.yahoo.com" >Yahoo</a>
          <span class="divider" > &gt; </span>
          <a href="www.example.com" >Example</a>
          <span class="divider" > &gt; </span> <a href="www.google.com">Google</a>
        </div>

但我想添加架构数据并仍然保持正确的样式。所以我尝试了这个，但所有链接都在不同的行。如何让它们在一行内联？

<div class = "BreadCrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="www.yahoo.com" itemprop="url">
    <span itemprop="title">Yahoo</span>
  </a> ›
</div>  
<div class = "BreadCrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="www.example.com" itemprop="url">
    <span itemprop="title">Example</span>
  </a> ›
</div>  
<div class = "BreadCrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="www.google.com" itemprop="url">
    <span itemprop="title">Google</span>
  </a>
</div>

Answer 1

来自Google：https://developers.google.com/search/docs/data-types/breadcrumbs

使用列表，然后设置内嵌li元素的样式

.breadcrumbs li {
     display: inline;
}

<div class="breadcrumbs"> 
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing"
       itemprop="item" href="https://example.com/books">
        <span itemprop="name">Books</span>
        <img itemprop="image" src="http://example.com/images/icon-bookicon.png" alt="Books"/></a>
    <meta itemprop="position" content="1" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing"
       itemprop="item" href="https://example.com/books/sciencefiction">
      <span itemprop="name">Science Fiction</span>
      <img itemprop="image" src="http://example.com/images/icon-science-fiction.png" alt="Genre: Science Fiction"/></a>
    <meta itemprop="position" content="2" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing"
       itemprop="item" href="https://example.com/books/sciencefiction/ancillaryjustice">
      <span itemprop="name">Ancillary Justice</span>
      <img itemprop="image" src="http://example.com/images/cover-ancillary-justice.png" alt="Ancillary Justice"/></a>
    <meta itemprop="position" content="3" />
  </li>
</ol>
</div>

Bootstrap面包屑样式与架构数据

1 个答案: