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".
<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?
– iamdlm
I recommend you filter this code and show us something simpler and more practical.
– Victor