Question

我使用bootstrap 4，我有一个左菜单。当我点击一个元素时，我会显示一个标签。

我做了一个ajax调用来获取百里香的片段

标签内容不占用所有空间

<div class="container-fluid h-100">
   <div class="row h-100">

      <div class="col-lg-2 my-auto">
         <div th:replace="fragments/left-menu :: LeftMenu('none')"></div>
      </div>

      <div id="main" class="col-lg-10 main">
         <ul class="nav nav-tabs" role="tablist">
             <li class="nav-item">
                 <a class="nav-link active" data-toggle="tab" href="#productTypesTabs" th:text="#{productTypes}">Product Types</a>
             </li>
         ...
         </ul>

         <div class="tab-content">
             <div id="productTypesTabs" class="container tab-pane active"><br>
                 <div id="productTypesFragment"></div>
             </div>   
             ....
         </div>

      </div>
      ....

   </div>

</div>

productTypesFragment的片段内容 https://pastebin.com/cDRqVViz

为什么它不占用所有空间，不明白？

Answer 1

问题是类容器

更改

<div id="productTypesTabs" class="container tab-pane active"><br>
    <div id="productTypesFragment"></div>
</div>

到

<div id="productTypesTabs" role="tabpanel" class="tab-pane active"><br>
    <div id="productTypesFragment"></div>
</div>

标签内容不会占据所有位置

1 个答案: