Question

我正在尝试在Bootstrap 4中实现Scrollspy with list group，但它不起作用。滚动内容包含data-spy="scroll" data-target="#fixed-menu" data-offset="0"，菜单包含id="fixed-menu"。

这是jsfiddle

HTML

<main class="Site-content">
  <div class="view">
    <div class="container-full">
      <div class="row ml-1">
        <div className="col col-10 ml-1" data-spy="scroll" data-target="#fixed-menu" data-offset="0">
        <h3>Create</h3>
        <div id="main1" class="card" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">Main1</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
        <div id="main2" class="card" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">Main2</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
        <div id="main3" class="card" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">Main3</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
        <div id="main4" class="card" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">Main4</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
        </div>
        <div
       id="fixed-menu"
       class="list-group fixedMenu"
       >
              <a class="list-group-item list-group-item-action listItem__link d-flex py-2 px-3" href="#main1">
                Main1
              </a>
              <a class="list-group-item list-group-item-action listItem__link d-flex py-2 px-3" href="#main2">
                Main2
              </a>
              <a
                class="list-group-item list-group-item-action listItem__link d-flex py-2 px-3"
                href="#main3"
              >
                Main3
              </a>
              <a
                class="list-group-item list-group-item-action listItem__link d-flex py-2 px-3"
                href="#main4"
              >
                Main4
              </a>
            </div>
      </div>
    </div>
  </div>
</main>

CSS

.Site-content{
  flex: 1;
}

.fixedMenu{
  width: 110px;
  position: fixed;
  right: 0;
}

Answer 1

如Bootstrap docs所示，在scrollspy元素的父元素上使用适当的数据属性......

<body data-spy="scroll" data-target="#fixed-menu" data-offset="0">

Bootstrap 4 scrollspy with list-group不起作用

1 个答案: