没有 href 的引导列表组垂直

在开发网站时，经常会需要使用引导列表组来展示页面的导航或者菜单等信息。但是，有时候我们并不想让这些引导链接具有点击跳转的功能，这时候就需要使用没有 href 的引导列表组。

什么是引导列表组？

引导列表组是一种常用的网站导航组件，它由一个 ul 元素和一系列 li 元素组成。每个 li 元素就是一个导航项，点击 li 元素会跳转到对应的页面。

没有 href 的引导列表组有什么用？

有时候我们想要在页面上展示一些导航或者菜单信息，但是不希望这些信息具有点击跳转的功能。比如，我们展示一些信息，但是需要等待用户输入一些信息才能进行下一步操作，这时候一个没有 href 的引导列表组就很有用了。

如何创建没有 href 的引导列表组？

创建一个没有 href 的引导列表组很简单，只需要在 li 元素中不添加 href 属性即可。样例代码如下：

<ul class="list-group">
  <li class="list-group-item">导航项 1</li>
  <li class="list-group-item">导航项 2</li>
  <li class="list-group-item">导航项 3</li>
</ul>

以上代码会生成一个简单的没有 href 的引导列表组，每个 li 元素均无法进行点击跳转的操作。

如何将没有 href 的引导列表组垂直展示？

如果需要将没有 href 的引导列表组垂直展示，只需要添加 .list-group-vertical 的样式即可。样例代码如下：

<ul class="list-group list-group-vertical">
  <li class="list-group-item">导航项 1</li>
  <li class="list-group-item">导航项 2</li>
  <li class="list-group-item">导航项 3</li>
</ul>

以上代码会生成一个垂直展示的没有 href 的引导列表组。

总结

没有 href 的引导列表组在展示页面导航或者菜单信息时很有用，通过简单地不添加 href 属性即可实现。我们也可以使用 .list-group-vertical 样式来将其垂直展示。