Dropdown menu bootstrap 4 tabs

Ticketa

Registered
привет,
някой има ли идея как мога да добавя на тези tabs работещо dropdown меню?

https://codepen.io/MaorGigi/pen/NWqrLJN

Добавяйки тези редове:
Код:
<li class="nav-item dropdown"><a href="javascript:void(0)" class="nav-link dropdown-toggle  active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="hidden-xs-down">Pages</span></a><div class="dropdown-menu"><a href="#" data-ajax="true" class="dropdown-item" role="tab" data-toggle="tab"><i class="icon-menu"></i>Pages 1</a><a href="#" data-ajax="true" class="dropdown-item" role="tab" data-toggle="tab"><i class="icon-plus"></i>Pages 2</a></div></li>

Те не са работещи и dropdown менюто не бачка. Идеята ми е при responsive mode да бачка и dropdown менюто

Пробвах и така и също не бачка;
Код:
<li class="nav-item dropdown"><a href="javascript:void(0)" class="nav-link dropdown-toggle  active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="hidden-xs-down">Pages</span></a><ul class="dropdown-menu"><li><a href="#" data-ajax="true" class="dropdown-item" role="tab" data-toggle="tab"><i class="icon-menu"></i>Pages 1</a></li><li><a href="#" data-ajax="true" class="dropdown-item" role="tab" data-toggle="tab"><i class="icon-plus"></i>Pages 2</a></li></ul></li>
 
Къде искаш да добавиш dropdown? С бутон до всеки от линковете ли?
Или самите линкове искаш да станат dropdown бутони - но в този случай при натискането им dropdown ли ще се появява, или ще се активира съответният таб?
 
anonimen каза:
Къде искаш да добавиш dropdown? С бутон до всеки от линковете ли?
Или самите линкове искаш да станат dropdown бутони - но в този случай при натискането им dropdown ли ще се появява, или ще се активира съответният таб?

Искам tabs линковете да бъдат подходящи за мобилни устройства т.е. ако имам 10 линка да има от дясно стрелка, точки или каквото и да е които да визуализират тези останали линкове.

Като някой от линковете да могат да имат и падащи (суб) менюта.


https://codepen.io/hayatbiralem/pen/KpzjOL

Това ми върши работа , но е за bootstrap 3 , а аз търся за bootstrap 4
 
Ticketa каза:
anonimen каза:
Къде искаш да добавиш dropdown? С бутон до всеки от линковете ли?
Или самите линкове искаш да станат dropdown бутони - но в този случай при натискането им dropdown ли ще се появява, или ще се активира съответният таб?

Искам tabs линковете да бъдат подходящи за мобилни устройства т.е. ако имам 10 линка да има от дясно стрелка, точки или каквото и да е които да визуализират тези останали линкове.

Като някой от линковете да могат да имат и падащи (суб) менюта.


https://codepen.io/hayatbiralem/pen/KpzjOL

Това ми върши работа , но е за bootstrap 3 , а аз търся за bootstrap 4

Ахаааа, разбрах те, аз се мъчих да добавя към самите линкове dropdown меню, ама нещо не ми се получи и реших да питам за разяснение :D

Ами аз в момента го виждам както ти го описваш:

wt.png
 
Виж, май го направих:

Код:
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" >How do we use it?</a>
              <div class="dropdown-menu">
              <a class="dropdown-item" href="#block-simple-text-2" aria-selected="false" aria-controls="block-simple-text-2" id="block-simple-text-2-tab">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>

        </li>

И сега излиза така: wt.png

А като цъкна 'action', зарежда втория таб.
 
Демо: https://codepen.io/man/pen/yLOjYjx
Само че се чупи при по-тесен екран, не се показва dropdown-ът.

ПП В горния код пропуснах data-toggle="tab" на линка от dropdown-а, с който активирам втория таб - без тоя атрибут не работи.
 
anonimen каза:
Демо: https://codepen.io/man/pen/yLOjYjx
Само че се чупи при по-тесен екран, не се показва dropdown-ът.

ПП В горния код пропуснах data-toggle="tab" на линка от dropdown-а, с който активирам втория таб - без тоя атрибут не работи.

Да, чупи се dropdown точно там имам проблем и аз под мобилни устройства :doh:

ПП В горния код пропуснах data-toggle="tab" на линка от dropdown-а, с който активирам втория таб - без тоя атрибут не работи

Това не го разбрах
 

Горе