时间戳

首页 > 解决方案 > 等高的选项卡式内容

html - 等高的选项卡式内容

问题描述

我正在尝试实现一个选项卡式菜单，该菜单显示显示在块中的内容。我可以使用填充来实现这一点，但我希望每个块的高度相同，我尝试使用 flexbox 但似乎无法让它工作。我怎样才能做到这一点？

.tab-pane {
  flex: 1;
  padding: 80px;
}

.nav-tabs {
border-bottom: none;
display:block;
}

.nav-tabs li a {
text-decoration:none;
}

.jj-icon {
  max-width: 50px;
  padding-bottom: 20px;
}

.bg-blue {
  background-color: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pt-200">
  <div class="row">
    <div class="col-6">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Title 1</a></li>
        <li><a data-toggle="tab" href="#menu1">Title 2 </a></li>
        <li><a data-toggle="tab" href="#menu2">Title 3</a></li>
      </ul>
    </div>
    <div class="col-6">
      <div class="tab-content d-flex flex-column">
        <div id="home" class="tab-pane justify-content-center bg-blue active">
          <img src="images/marketing.svg" class="jj-icon">
          <h3>Menu</h3>
          <p>Sed vel erat ultrices, facilisis metus et, tincidunt turpis. Aenean nec lorem finibus, ornare ex sit amet, tempus nunc. Proin feugiat rhoncus nibh vel laoreet.</p>
        </div>
        <div id="menu1" class="tab-pane justify-content-center bg-blue fade">
          <img src="images/marketing.svg" class="jj-icon">
          <h3>Menu 1</h3>
          <p>Faucibus, vitae posuere felis molestie. Integer vulputate euismod libero, ac dignissim arcu aliquam id. In hac habitasse platea dictumst.</p>
        </div>
        <div id="menu2" class="tab-pane justify-content-center bg-blue fade">
          <img src="images/marketing.svg" class="jj-icon">
          <h3>Menu 2</h3>
          <p>Fusce sagittis urna nec ultrices rutrum. In tristique mi non tellus vulputate, nec luctus diam porttitor. Nulla porttitor sagittis placerat.</p>
        </div>
      </div>
    </div>
  </div>
</div>

这是我希望它的外观：

在此处输入图像描述

标签： htmlcsstwitter-bootstrapflexbox

解决方案

Bootstrap 带有用于 display 、 margin 、 padding 的内置类...

弹性盒子可以叠瓦：可能的例子：

.tab-pane {
  flex: 1;
  padding: 80px;
}

.nav-tabs {
border-bottom: none;
display:block;
}

.nav-tabs li a {
text-decoration:none;
}

.jj-icon {
  max-width: 50px;
  padding-bottom: 20px;
}

.bg-blue {
  background-color: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pt-200">
  <div class="row">
    <div class="col-6 d-flex">
      <ul class="nav nav-tabs d-flex flex-column w-100 m-0 p-0 align-items-center justify-content-center">
        <li class="active p-0 m-2"><a data-toggle="tab" href="#home">Title 1</a></li>
        <li class=" p-0 m-2"><a data-toggle="tab" href="#menu1">Title 2 </a></li>
        <li class=" p-0 m-2"><a data-toggle="tab" href="#menu2">Title 3</a></li>
      </ul>
    </div>
    <div class="col-6">
      <div class="tab-content d-flex flex-column">
        <div id="home" class="tab-pane justify-content-center bg-blue active">
          <img src="images/marketing.svg" class="jj-icon">
          <h3>Menu</h3>
          <p>Sed vel erat ultrices, facilisis metus et, tincidunt turpis. Aenean nec lorem finibus, ornare ex sit amet, tempus nunc. Proin feugiat rhoncus nibh vel laoreet.</p>
        </div>
        <div id="menu1" class="tab-pane justify-content-center bg-blue fade">
          <img src="images/marketing.svg" class="jj-icon">
          <h3>Menu 1</h3>
          <p>Faucibus, vitae posuere felis molestie. Integer vulputate euismod libero, ac dignissim arcu aliquam id. In hac habitasse platea dictumst.</p>
        </div>
        <div id="menu2" class="tab-pane justify-content-center bg-blue fade">
          <img src="images/marketing.svg" class="jj-icon">
          <h3>Menu 2</h3>
          <p>Fusce sagittis urna nec ultrices rutrum. In tristique mi non tellus vulputate, nec luctus diam porttitor. Nulla porttitor sagittis placerat.</p>
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读