Ma ktoś jakiś pomysł na rozwiązanie tego? Mój kod wygląda tak :
Code: Zaznacz cały
<section id="price-list" class="price-list-main">
<div class="container">
<div class="container price-list-main-buttons">
<div class="nav nav-pills" id="list-tab-main" role="tablist">
<button class="btn btn-outline-primary active" id="main-option-1-list" data-toggle="pill" href="#main-option-1" role="tab">Paznokcie</button>
<button class="btn btn-outline-primary" id="main-option-2-list" data-toggle="pill" href="#main-option-2" role="tab">Włosy</button>
<button class="btn btn-outline-primary" id="main-option-3-list" data-toggle="pill" href="#main-option-3" role="tab">Zabiegi</button>
<button class="btn btn-outline-primary" id="main-option-4-list" data-toggle="pill" href="#main-option-4" role="tab">Masaże</button>
</div>
</div>
<div class="container">
<div class="tab-content">
<div class="tab-pane fade show active" id="main-option-1" role="tabpanel">
<div class="container ">
<div class="row">
<div class="col-4 price-list">
<div class="list-group" id="list-tab-price-1" role="tablist">
<a class="active" id="list-home-list" data-toggle="list" href="#option-1-1" role="tab">price 1</a>
<a class="" id="list-profile-list" data-toggle="list" href="#option-1-2" role="tab">price 2</a>
<a class="" id="list-messages-list" data-toggle="list" href="#option-1-3" role="tab">price 3</a>
<a class="" id="list-settings-list" data-toggle="list" href="#option-1-4" role="tab">price 4</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="price-list-1">
<div class="tab-pane fade show active" id="option-1-1" role="tabpanel">aa</div>
<div class="tab-pane fade" id="option-1-2" role="tabpanel">ab</div>
<div class="tab-pane fade" id="option-1-3" role="tabpanel">ac</div>
<div class="tab-pane fade" id="option-1-4" role="tabpanel">ad</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="main-option-2" role="tabpanel">
<div class="container ">
<div class="row">
<div class="col-4 price-list">
<div class="list-group" id="list-tab" role="tablist">
<a class=" active" id="list-home-list" data-toggle="list" href="#option-2-1" role="tab">price 1</a>
<a class="" id="list-profile-list" data-toggle="list" href="#option-2-2" role="tab">price 2</a>
<a class="" id="list-messages-list" data-toggle="list" href="#option-2-3" role="tab">price 3</a>
<a class="" id="list-settings-list" data-toggle="list" href="#option-2-4" role="tab">price 4</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="price-list-2">
<div class="tab-pane fade show active" id="option-2-1" role="tabpanel">ba</div>
<div class="tab-pane fade" id="option-2-2" role="tabpanel">bb</div>
<div class="tab-pane fade" id="option-2-3" role="tabpanel">bc</div>
<div class="tab-pane fade" id="option-2-4" role="tabpanel">bd</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="main-option-3" role="tabpanel">
<div class="container">
<div class="row">
<div class="col-4 price-list">
<div class="list-group" id="list-tab" role="tablist">
<a class=" active" id="list-home-list" data-toggle="list" href="#option-3-1" role="tab">price 1</a>
<a class="" id="list-profile-list" data-toggle="list" href="#option-3-2" role="tab">price 2</a>
<a class="" id="list-messages-list" data-toggle="list" href="#option-3-3" role="tab">price 3</a>
<a class="" id="list-settings-list" data-toggle="list" href="#option-3-4" role="tab">price 4</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="price-list-3">
<div class="tab-pane fade show active" id="option-3-1" role="tabpanel">ca</div>
<div class="tab-pane fade" id="option-3-2" role="tabpanel">cb</div>
<div class="tab-pane fade" id="option-3-3" role="tabpanel">cc</div>
<div class="tab-pane fade" id="option-3-4" role="tabpanel">cd</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="main-option-4" role="tabpanel">
<div class="container">
<div class="row">
<div class="col-4 price-list">
<div class="list-group" id="list-tab" role="tablist">
<a class=" active" id="list-home-list" data-toggle="list" href="#option-4-1" role="tab">price 1</a>
<a class="" id="list-profile-list" data-toggle="list" href="#option-4-2" role="tab">price 2</a>
<a class="" id="list-messages-list" data-toggle="list" href="#option-4-3" role="tab">price 3</a>
<a class="" id="list-settings-list" data-toggle="list" href="#option-4-4" role="tab">price 4</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="price-list-4">
<div class="tab-pane fade show active" id="option-4-1" role="tabpanel">da</div>
<div class="tab-pane fade" id="option-4-2" role="tabpanel">db</div>
<div class="tab-pane fade" id="option-4-3" role="tabpanel">dc</div>
<div class="tab-pane fade" id="option-4-4" role="tabpanel">dd</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>