Question

我正在使用引导程序4.3。 bootstrap 4.3具有sizing类m-*和w-*类，用于设置元素的高度和宽度。我能够将容器的高度和宽度设置为100％，现在我尝试将标签面板的高度和宽度设置为100％。

    <div class="container-fluid w-highlight-container h-100 d-flex flex-column">        
        <main role="main" class="pb-3">      

     <ul class="nav nav-tabs mt-3">
        <li class="nav-item">
          <a class="nav-link active" href="#w-tab1" data-toggle="tab" role="tab">Tab1</a>
        </li>
       <li class="nav-item">
         <a class="nav-link" href="#w-tab2" data-toggle="tab" role="tab">Tab2</a>
       </li>      
    </ul>
    <div class="tab-content">
    <div id="w-tab1" class="tab-pane fade active show" role="tabpanel">        
        <div class="row">
            <div class="col-md-12">
                <div class="w-tab1 h-100 w-100">
                  requires 100% height and 100% width of view port
                </div>
            </div>
        </div>
    </div>
    <div id="w-tab2" class="tab-pane fade" role="tabpanel">
         <div class="row">
            <div class="col-md-12">
                <div class="w-tab2 h-100 w-100">
                  requires 100% height and 100% width of view port
                </div>
            </div>
        </div>
    </div>    
    </div>
</main>
    </div>
   <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2019 - UI - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>

Answer 1

w-100和h-100可以按预期完成任务，只是其父容器没有从一侧到另一侧100％伸展...所以我们从tab-content开始然后确保尊重100％的宽度和高度...一直到我们已经具有w-100和h-100类的相关div。

下面的代码段：

.w-tab1 {
  border: solid 2px black;
  background-color: green;
}

.w-tab2 {
  border: solid 2px black;
  background-color: red;
}

.w-highlight-container {
  border: solid 2px black;
  background-color: #ffd;
}

html,
body {
  height: 100%;
}

.tab-content {
  height: calc(100vh - (75px)) !important;
  width: calc(100vw - (40px)) !important
}

.tab-content>.active {
  display: inline-flex;
  height: 100%;
  width: 100%
}

.tab-content>.active>.row {
  display: contents
}

.tab-content>.active>.row>div {
  padding-left: 0;
  width: 100%;
  display: contents;
}

.tab-content>.active>.row>div>.w-100 {
  width: 99% !important
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="container-fluid w-highlight-container h-100 d-flex flex-column">
  <main role="main" class="pb-3">

    <ul class="nav nav-tabs mt-3">
      <li class="nav-item">
        <a class="nav-link active" href="#w-tab1" data-toggle="tab" role="tab">Tab1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#w-tab2" data-toggle="tab" role="tab">Tab2</a>
      </li>
    </ul>
    <div class="tab-content">
      <div id="w-tab1" class="tab-pane fade active show" role="tabpanel">
        <div class="row">
          <div class="col-md-12">
            <div class="w-tab1 h-100 w-100">
              requires 100% height and 100% width
            </div>
          </div>
        </div>
      </div>
      <div id="w-tab2" class="tab-pane fade" role="tabpanel">
        <div class="row">
          <div class="col-md-12">
            <div class="w-tab2 h-100 w-100">
              requires 100% height and 100% width
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>
<footer class="border-top footer text-muted">
  <div class="container">
    &copy; 2019 - UI - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
  </div>
</footer>

如何使用Bootstrap 4.3获取标签面板的100％高度和宽度

1 个答案: