Problems with horizontal Nav-tab

Asked

Viewed 28 times

0

I have a vertical Nav-tab component that works properly. When I add a horizontal Nav-tab inside a tab, it takes the shape of vertical. Does anyone know how to fix this? I’m using a bootstrap framework called "Remark".

inserir a descrição da imagem aqui

<div class="panel">
    <div class="panel-body container-fluid pt-10 pl-15 pr-15">
        <div class="form-horizontal">
            <vc:summary />
            <div class="form-horizontal">
                <div class="form-group row">
                    <div class="nav-tabs-vertical" data-plugin="tabs">
                        <ul class="nav nav-tabs mr-25" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="nav-link active" data-toggle="tab" href="#tabPreferencias"
                                   aria-controls="exampleTabsLeftOne" role="tab"><i class="icon wb-heart m-5" aria-hidden="true"></i>Preferências</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" data-toggle="tab" href="#tabBackup"
                                   aria-controls="exampleTabsLeftTwo" role="tab"><i class="icon fa-database m-5" aria-hidden="true"></i>Backup</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" data-toggle="tab" href="#tabAgendamento"
                                   aria-controls="exampleTabsLeftThree" role="tab"><i class="icon glyphicon glyphicon-calendar m-5" aria-hidden="true"></i>Agendamento</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" data-toggle="tab" href="#exampleTabsLeftFour"
                                   aria-controls="exampleTabsLeftFour" role="tab">Javascript</a>
                            </li>
                        </ul>
                        <div class="tab-content py-15">
                            <div class="tab-pane active" id="tabPreferencias" role="tabpanel">

                            </div>
                            <div class="tab-pane" id="tabBackup" role="tabpanel">

                                <div class="nav-tabs-horizontal" data-plugin="tabs">
                                    <ul class="nav nav-tabs nav-tabs-line tabs-line-top" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link active" data-toggle="tab" href="#exampleTabsLineTopOne"
                                               aria-controls="exampleTabsLineTopOne" role="tab">Home</a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" data-toggle="tab" href="#exampleTabsLineTopTwo"
                                               aria-controls="exampleTabsLineTopTwo" role="tab">Components</a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" data-toggle="tab" href="#exampleTabsLineTopThree"
                                               aria-controls="exampleTabsLineTopThree" role="tab">Css</a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" data-toggle="tab" href="#exampleTabsLineTopFour"
                                               aria-controls="exampleTabsLineTopFour" role="tab">Javascript</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content pt-20">
                                        <div class="tab-pane active" id="exampleTabsLineTopOne" role="tabpanel">
                                            Mel, incorruptis confidam derepta inportuno perpetuam placatae. Expetenda summam
                                            venandi cotidie euripidis vexetur, scribendi recta fortunam
                                            hanc oblivione. Iniuria ipso statuam utrumque asperiores
                                            eae cogitemus, evertitur triarium perspexit conclusionemque
                                            propterea repellendus agatur scilicet, leniter intervalla
                                            nocet praeterierunt tuum privatione, senserit sale vias,
                                            delectatum dedecora ratione o religionis derigatur diuturnum
                                            arbitrantur conspiratione, legam opera splendore iste democritum
                                            apte romanum legum egregios.
                                        </div>
                                        <div class="tab-pane" id="exampleTabsLineTopTwo" role="tabpanel">
                                            Mnesarchum velit cumanum utuntur tantam deterritum, democritum vulgo contumeliae
                                            abest studuisse quanta telos. Inmensae. Arbitratu dixisset
                                            invidiae ferre constituto gaudeat contentam, omnium nescius,
                                            consistat interesse animi, amet fuisset numen graecos incidunt
                                            euripidis praesens, homines religionis dirigentur postulant.
                                            Magnum utrumvis gravitate appareat fabulae facio perveniri
                                            fruenda indicaverunt texit, frequenter probet diligenter
                                            sententia meam distinctio theseo legerint corporis quoquo,
                                            optari futurove expedita.
                                        </div>
                                        <div class="tab-pane" id="exampleTabsLineTopThree" role="tabpanel">
                                            Faciendi denique miserius iudico, significet ingenii adduci angere efficit linguam.
                                            Delectatum copulatas solemus tenere legam ignaviamque diis
                                            peccant ornamenta videro, adquiescere bonorum quisquam
                                            ceramico minime quodsi corporisque. Nostri pauca gravioribus
                                            reici solvantur, angoribus naturalem sed epicurei occultum
                                            sola institutionem meminerunt quem fonte, confirmat. Cui
                                            eodem perspecta vim solis innumerabiles, videatur status
                                            qui quanto sapientiam nomini honestum, comit sumitur nati
                                            via.
                                        </div>
                                        <div class="tab-pane" id="exampleTabsLineTopFour" role="tabpanel">
                                            Dicent feramus necesse proficiscuntur libidinem quisquis, petulantes divitias compositis,
                                            disseretur voluptates crudeli sustulisti. Hostis res utuntur
                                            bono incurrunt navigandi laboribus istae tali, miserum
                                            metuamus labor quasi synephebos iudicante. Effecerit sicine
                                            falsarum pugnantibus imperitos, vero successionem exhorrescere
                                            illis magnopere deteriora maioribus necessariam industria.
                                            Illi variari stabilique augendas suscipiet, corrigere conducunt,
                                            divinum affecti, eruditus clarorum. Spatio gustare cupiditates
                                            desideret aliena sinat utrumque.
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="tab-pane" id="tabAgendamento" role="tabpanel">

                            </div>
                            <div class="tab-pane" id="exampleTabsLeftFour" role="tabpanel">

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
  • This code snippet corresponds to what we see in the image?

  • I recommend you filter this code and show us something simpler and more practical.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.