Bootstrap 4中的选项卡窗格失去宽度

Question

我在我的项目中创建了带有三个选项卡的选项卡式内容。对于每个选项卡窗格，窗格都会失去宽度。例如，第一个选项卡窗格是完整的 100% 宽度，但是每个窗格向前连续丢失 100-200 像素。

例如：

• 第一个窗格是 1140px（容器的全宽）
• 第二个窗格是：1004px宽
• 第三个窗格是：794px 宽度

我已经检查了缺少的 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 Fiddle：

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

Answer 1

.tab-content {
  width: 100%; 
}

还注意到您的网格仅从 lg 开始。移动优先！