Как предотвратить наложение вертикальных таблеток на содержимое вкладок?

Question

Я использую bootstrap 4 в веб-приложении для организации измерений топографии.

На одной странице график такой топографии показан в элементе <div class='tab-content'>. Есть две панели навигации, «График» и «Свойства», которые позволяют выбирать содержимое вкладки.

Вот упрощенная версия исходной разметки:

  <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>

А вот скрипка , где вы можете увидеть ее в действии.

Таблетки работают, но моя проблема в том, что иногда в моем приложении (в зависимости от уровня масштабирования моей страницы), а также в скрипка, синий фон выбранной таблетки перекрывается рамкой и содержимым вкладки:

Может кто-нибудь подскажет, как предотвратить таблетки от перекрытия, например по CSS? Я бы хотел, чтобы таблетки находились полностью слева от вертикальной границы.

Answer 1

крайний левый столбец переполняет содержимое из-за col-1, вы можете использовать bootstrap медиа-запрос (xs, sm, md, lg, xl) для разделения столбцов.

<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>