Потеря ширины вкладок в Bootstrap 4 - PullRequest
Новая
       9

Потеря ширины вкладок в Bootstrap 4

0 голосов
/ 18 февраля 2020

Я создал контент с вкладками в своем проекте с тремя вкладками. Для каждой панели вкладок панель теряет ширину. Например, первая панель вкладок имеет полную ширину 100%, однако каждая последующая панель теряет 100-200 пикселей подряд.

Например:

  • Первая панель размером 1140 пикселей (полная ширина контейнера)
  • Вторая панель: ширина 1004 пикселей
  • третья панель: ширина 794 пикселя

Я проверил наличие недостающих элементов div, и я не считаю, что причиной является использование строк и столбцов на панелях вкладок. Я также безуспешно пытался установить width: 100% на панели вкладок.

Я не могу понять, почему это происходит. 

<section class="home-office-types">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <ul class="nav nav-tabs home-office-types__tabs" id="myTab" role="tablist">
          <li class="nav-item home-office-types__tab">
            <a class="nav-link home-office-types__tab-link active" id="managed-offices-tab" data-toggle="tab" href="#managed-offices" role="tab"
              aria-controls="managed-offices" aria-selected="true">Serviced & managed offices</a>
          </li>
          <li class="nav-item home-office-types__tab">
            <a class="nav-link home-office-types__tab-link" id="meeting-rooms-tab" data-toggle="tab" href="#meeting-rooms" role="tab"
              aria-controls="meeting-rooms" aria-selected="true">Meeting Rooms</a>
          </li>
          <li class="nav-item home-office-types__tab">
            <a class="nav-link home-office-types__tab-link" id="virtual-offices-tab" data-toggle="tab" href="#virtual-offices" role="tab"
              aria-controls="virtual-offices" aria-selected="true">Virtual Offices</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="tab-content home-office-types__content" id="myTabContent">
        <div class="tab-pane fade show active" id="managed-offices" role="tabpanel"
          aria-labelledby="managed-offices-tab">
          <div class="row">
            <div class="col-lg-7 d-flex justify-content-start">
              <ul>
                <li>State of the art internet & phone packages</li>
                <li>Fully furnished and ready for you to move in and make your home</li>
                <li>No hidden costs - your monthly fee covers everything from all your utilities to cleaning</li>
                <li>Great value and truly affordable prices</li>
                <li>No long contracts - choose from a few days to as long as you want giving you total control of your business’ finances</li>
              </ul>
            </div>
            <div class="col-lg-5 d-flex justify-content-end">
              <img class="home-office-types__image img-fluid" src="https://placehold.co/304x304" alt="">
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="meeting-rooms" role="tabpanel" aria-labelledby="meeting-rooms-tab">
          <div class="row">
            <div class="col-lg-7 d-flex justify-content-start">
              <ul>
                <li>State of the art internet & phone packages</li>
                <li>Fully furnished and ready for you to move in and make your home</li>
              </ul>
            </div>
            <div class="col-lg-5 d-flex justify-content-end">
              <img class="home-office-types__image img-fluid" src="https://placehold.co/304x304" alt="">
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="virtual-offices" role="tabpanel" aria-labelledby="virtual-offices-tab">
          <div class="row">
            <div class="col-lg-7 d-flex justify-content-start">
              <ul>
                <li>State of the art internet & phone packages</li>
              </ul>
            </div>
            <div class="col-lg-5 d-flex justify-content-end">
              <img class="home-office-types__image img-fluid" src="https://placehold.co/304x304" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Ниже приведена JS Скрипка:

https://jsfiddle.net/graeme95/qo6tj819/2/

1 Ответ

1 голос
/ 18 февраля 2020 
.tab-content {
  width: 100%; 
}

Также заметил, что ваша сетка начинается только с lg. Мобильный сначала!

...