选项卡窗格在引导4中丢失宽度

Question

我用三个选项卡在我的项目中创建了选项卡内容。对于每个选项卡窗格，窗格将失去宽度。例如，第一个选项卡窗格是完整的100%宽度，但是每个面板连续丢失100到200 is。

例如：

• 第一个窗格是1140 is (容器的全宽度)
• ，第二个窗格是: 1004px宽度
• ，第三个窗格是:794 is宽度

。

我已经检查了缺少的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开始。移动第一！