How to prevent that vertical pills overlap with tab contents? - html

Question

I'm using bootstrap 4 in a web application for organizing topography measurements.
On one page, a plot of such a topography is shown in an <div class='tab-content'> element.
There are two navigation pills, "Plot" and "Properties", which allow to select the tab contents.
Here is a simplified version of the original markup:
<div class="container">
<div class="row">
<!-- The leftmost column contain a vertical navigation bar -->
<div class="col-md-1 mb-2 border-right">
<div class="nav nav-pills flex-column" role="tablist" aria-orientation="vertical">
<a class="nav-link active" data-toggle="tab" href="#plot" role="tab">Plot</a>
<a class="nav-link" data-toggle="tab" href="#properties" role="tab">Properties</a>
</div>
</div>
<!-- Columns in the middle change depending on selected pill-->
<div class="col-8">
<div class="tab-content mt-2">
<div class="tab-pane fade active show" id="plot" role="tabpanel" aria-labelledby="plot-tab">
Some plot.
</div>
<div class="tab-pane fade" id="properties" role="tabpanel" aria-labelledby="properties-tab">
Some properties.
</div>
</div>
</div>
<!-- Rightmost 3 columns are a button area -->
<div class="col-3">
<div class="row p-3 pull-right">
<button class="btn btn-primary">
A button
</button>
</div>
</div>
</div>
And here is a fiddle, where you can see it in action.
The pills work, but my problem is that sometimes in my application (depending on the zoom level of my page) and also in the fiddle, the blue background of the selected pill overlaps with the border and with the tab contents:
Could someone give me a hint how to prevent the pills from overlapping, e.g. by CSS?
I would like to have the pills completely on the left of the vertical border.

Answer 1

leftmost column is overflowing the content because of col-1 , you can use bootstrap media query (xs, sm, md, lg, xl) for dividing columns.
<div class="container">
<div class="row">
<!-- The leftmost column contain a vertical navigation bar -->
<div class="col-md-3 col-4 mb-2 border-right">
<div class="nav nav-pills flex-column" role="tablist" aria-orientation="vertical">
<a class="nav-link active" data-toggle="tab" href="#plot" role="tab">Plot</a>
<a class="nav-link" data-toggle="tab" href="#properties" role="tab">Properties</a>
</div>
</div>
<!-- Columns in the middle change depending on selected pill-->
<div class="col-md-6 col-8">
<div class="tab-content mt-2">
<div class="tab-pane fade active show" id="plot" role="tabpanel" aria-labelledby="plot-tab">
Some plot.
</div>
<div class="tab-pane fade" id="properties" role="tabpanel" aria-labelledby="properties-tab">
Some properties.
</div>
</div>
</div>
<!-- Rightmost 3 columns are a button area -->
<div class="col-md-3">
<div class="row p-3 pull-right">
<button class="btn btn-primary">
A button
</button>
</div>
</div>
</div>
</div>