Question

我有一个导航标签部分来容纳一些图像，不同的部分会有不同的图像。

当您将小提琴尺寸调整为较小尺寸时，您可以看到图像重叠的巨大空白区域。我不确定如何解决这个问题...我必须删除身高100，但我想强制高度，因为它看起来不错。

HTML CODE：

<div class="container-fluid bg-dark h-100">
    <div class="row">
      <div class="col-md-8">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
              <a class="nav-link text-danger" data-toggle="tab" href="#tab1" role="tab">tab1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-danger" data-toggle="tab" href="#tab2" role="tab">tab2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-danger" data-toggle="tab" href="#tab3" role="tab">tab3</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-danger" data-toggle="tab" href="#tab4" role="tab">tab4</a>
            </li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content text-white">
            <div class="tab-pane fade in" id="tab1" role="tabpanel">
              <!--Row 1 start-->
              <div class="row py-2 h-100">
                <div class="col-md-3">
                    <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                </div>
                <div class="col-md-3">
                    <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                </div>
                <div class="col-md-3">
                    <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                </div>
                <div class="col-md-3">
                    <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                </div>
              </div>
              <!--Row 1 end-->
              <!--Row 2 start-->
              <div class="row py-2 h-100">
                  <div class="col-md-3">
                      <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                  </div>
                  <div class="col-md-3">
                      <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                  </div>
                  <div class="col-md-3">
                      <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                  </div>
                  <div class="col-md-3">
                      <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                  </div>
                </div>
                <!--Row 2 end-->
              <!--Row 3 start-->
              <div class="row py-2 h-100">
                  <div class="col-md-3">
                      <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                  </div>
                  <div class="col-md-3">
                      <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                  </div>
                  <div class="col-md-3">
                      <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                  </div>
                  <div class="col-md-3">
                      <a href="#"><img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title=""></a>
                  </div>
                </div>
                <!--Row 3 end-->
            </div>
            <div class="tab-pane fade in" id="tab2" role="tabpanel">
             x
            </div>
            <div class="tab-pane fade in " id="tab3" role="tabpanel">
             x
            </div>
            <div class="tab-pane fade in" id="tab4" role="tabpanel">
              x
            </div>
          </div>
      </div>
      <div class="col-md-4 control">
        <div class="container-fluid">
        some content here
      </div>
      </div>
    </div>
  </div>

CSS：

html, body {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
  }
.control{
    background-color:#24262D;
}

这是JSFiddle（使用B4和CSS）： https://jsfiddle.net/yeg1dsut/9/

谢谢！

Answer 1

不应使用h-100（高度：100％），而应使用最小高度...

.container-fluid {
  min-height: 100%;
}

当调整较小时，Bootstrap 4容器流体高度不会扩展到视口

1 个答案: