Класс строки не делится на все 12 столбцов экрана

Question

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<nav class="navbar navbar-light bg-light pip-footer">
  <div class="container">
    <div class="row">
      <div class="col-lg-3">
        HP 90/90
      </div>
      <div class="col-lg-6">
        LEVEL 1
      </div>
      <div class="col-lg-3">
        AP 50/50
      </div>
    </div>
  </div>
</nav>

Я объявляю контейнер класса, и сразу после этого я удаляю строку класса, но строка не полностью распределяется по всему экрану.

Answer 1

Потому что вы заключили классы .row и .col-* в тег <nav></nav>.

Если вы собираетесь создать Nav, перейдите по этой ссылке - Bootstrap Nav

Я добавил несколько стилей, чтобы изменить фон столбцов для лучшей видимости.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<style>
    .col-lg-3 {
        background-color: aqua;
    }

    .col-lg-6 {
        background-color: blueviolet;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            HP 90/90
        </div>
        <div class="col-lg-6">
            LEVEL 1
        </div>
        <div class="col-lg-3">
            AP 50/50
        </div>
    </div>
</div>