如何复制bootstrap分组按钮而不是链接？

Question

我正在尝试使用Bootstrap对齐分组按钮样式并创建看起来像分组按钮的div将只是非链接div的结果。我正在使用它作为＆＃34;步骤＆＃34;表示，因此按钮1将突出显示文本，表示我们在步骤1，或按钮2将在您执行步骤2时突出显示。请参阅我在附图中的示例。

我截屏的按钮非常适合作为舞台指示器，但我不希望用户感到困惑并认为他们应该链接到某些东西。我尝试用跨度替换按钮输入，如下所示：

      <div class="btn-group btn-group-justified" role="group">
            <div class="btn-group" role="group">
                <span class="btn btn-default">Q&amp;A</span>
            </div>
            <div class="btn-group" role="group">
                <span class="btn btn-info">Proposal Submissions</span>
            </div>
            <div class="btn-group" role="group">
                <span class="btn btn-default">Best &amp; Final Offers</span>
            </div>
            <div class="btn-group" role="group">
                <span class="btn btn-default">Final Selection</span>
            </div>
        </div>

我不知道这是否是我应该采用的方式，或者是否有标准方法来执行此操作。我也尝试使用带有btn类的div而不是按钮或跨度，同样的结果，它仍然成为一个链接。我很乐意继续使用按钮类，只要我可以在光标悬停在它上面时删除链接效果。

感谢您的帮助。

Answer 1

我建议你看看bootstrap是否有像breadcrumb这样的组件，因为这对你的用例更有意义。但是如果你想快速入侵，你可以覆盖btn类。您可以为父类提供类似c-steps的类，然后覆盖btn组的样式：

html

<div class="btn-group btn-group-justified c-steps" role="group">...

css

.c-steps .btn-group,
.c-steps .btn.btn {
  text-decoration: none;
  /* other override styles */
}