Bootstrap 3选项卡未加载到正确的位置

Question

我正在尝试设置一些引导选项卡，而不是从同一位置的不同选项卡加载内容，第一个选项卡内容位于顶部，然后下一个选项卡显示在第一个选项卡下方，第三个选项卡显示在第二个选项卡下方。为什么它们不是全部显示在显示区域的顶部？

          <div class="row">
        <div class="listingInteractions">

            <ul class="nav nav-tabs listingTabs" id="requestTab" role="tablist">
                <li class="active">
                    <a href="#openQuoteTab" role="tab" data-toggle="tab">OPEN QUOTE REQUESTS</a>
                </li>
                <li class="">
                    <a href="#closedQuoteTab" role="tab" data-toggle="tab">CLOSED QUOTE REQUESTS</a>
                </li>
                <li class="">
                    <a href="#bookedEventsTab" role="tab" data-toggle="tab">BOOKED EVENTS</a>
                </li>
            </ul>




            <div class="tab-content">
                <div class="tab-pane fade in active" id="openQuoteTab">
                    hello

                </div>

                <div class="tab-pane fade" id="closedQuoteTab">
                    <div>
                        rofl
                    </div>
                </div>
                <div class="tab-pane fade" id="bookedEventsTab">
                    <div>
                        haha
                    </div>
                </div>
            </div>

        </div>
      </div>