Как реплицировать кнопки бутстрапа сгруппированы без ссылки?

Question

Я пытаюсь использовать стиль упорядоченных сгруппированных кнопок Bootstrap и создавать divs, которые будут отображаться как сгруппированные кнопки, будут просто результатом не связанных ссылок. Я использую его как представление «шагов», поэтому кнопка будет выделена с текстом, символизирующим, что мы находимся на шаге 1, или кнопка два будет выделяться, когда вы на шаге 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> 

Я не знаю, если это даже так, я должен идти об этом, или если есть стандартный способ сделать это с дивами. Я также пытался использовать divs с классами btn вместо кнопок или интервалов, то же самое, он все равно становится ссылкой. Я с удовольствием продолжаю использовать классы кнопок, пока я могу удалить эффект ссылки, когда курсор завис над ним.

Благодарим за помощь.

Answer 1

Я бы предложил вам посмотреть, есть ли у загрузочного устройства такой компонент, как breadcrumb, потому что это имеет смысл для вашего прецедента. Но если вы хотите что-то взломать, вы можете переопределить классы btn. Вы могли бы дать родителю класс как c-steps и затем переопределить стили для БТН групп:

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 */ 
}