css - Bootstrap 4 导航选项卡问题

Question

我是 bootstrap 的初学者 任何关于如何像这样使用 bootstrap-04 的想法，看看我的形象，我想让所有设备都是这种类型，但是它不起作用请帮我做这个，

谢谢

看我的代码 code sample

Answer 1

您需要在 .nav-tabs li 和 .base-block 中添加 width:50%;

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  overflow:hidden;/*added*/
}

.nav-tabs li {
  box-shadow: -25px 0 0 -23px gray, 0 25px 0 -23px gray;/*update*/
  padding: 50px;
  width:50%;
}

#container .nav-tabs {
  background-image: image(bg-line-bar.png);
  width: auto;
  height: auto;
}

#container .nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
  border-width: 0;
}

#container .nav-tabs>li>a {
  border: none;
  color: #666;
}

#container .tab-pane {
  padding: 15px 0;
}

#container .tab-content {
  padding: 20px
}

#container .nav-tabs li.active a {
  border: none;
}

.block {
  width: 203px;
  height: 90px;
  /* margin-left: -45px; */
  margin: -28px -15px;
  padding: 34px 47px;
  text-align: center;
  display: inline-block;
  background: ;
  color: #a6a6a6;
}

.block:hover h1 {
  color: #000000;
}

.block:hover h5 {
  color: #A48973;
}

#base {
  background: #eee;
  display: inline-block;
  height: 120px;
  margin-left: -15px;
  margin-top: -25px;
  position: relative;
  text-align: center;
  width: 111%;
  padding: 5px 10px;
}

#base2 {
  background: #eee;
  display: inline-block;
  height: 120px;
  margin-left: -15px;
  margin-top: -25px;
  position: relative;
  text-align: center;
  width: 111%;
  padding: 5px 10px;
}

#base:before {
  border-bottom: 21px solid #eee;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  content: "";
  height: 0;
  left: 182px;
  position: absolute;
  top: -19px;
  width: 0;
}

#base2:before {
  border-bottom: 21px solid #eee;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  content: "";
  height: 0;
  left: 182px;
  position: absolute;
  top: -19px;
  width: 0;
}

.base-block {
  display: inline-block;
  height: 120px;
  width: 200px;
  margin: -15px;
  display: inline-block;
  text-align: center;
  margin-top: 25px;
  width:50%;
}

.base-block h1,
h4 {
  color: #000000;
}

.base-block h5 {
  color: #A48973;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#home" aria-controls="home" role="tab" data-toggle="tab">
        <div class="block block-1">
          <h1>01</h1>
          <h5>textone</h5>
        </div>
      </a>
    </li>
    <li role="presentation">
      <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
        <div class="block block-2">
          <h1>02</h1>
          <h5>text two
          </h5>
        </div>
      </a>
    </li>

    <li role="presentation">
      <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">
        <div class="block block-3">
          <h1>03
          </h1>
          <h5>Text three
          </h5>
        </div>
      </a>
    </li>

    <li role="presentation">
      <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">
        <div class="block block-4">
          <h1>04
          </h1>
          <h5>text04
          </h5>
        </div>
      </a>
    </li>
  </ul>
  <!--Menu Part 02-->

  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      <div id="base">
        <div class="base-block">
          <h4>text one
          </h4>
          <h1>01</h1>
          <h5>text
          </h5>
        </div>
        <div class="base-block">
          <h4>text 01
          </h4>
          <h1>000
          </h1>
          <h5>text
          </h5>
        </div>

      </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
      <div id="base2">
        <div class="base-block">
          <h4>Tentative bookings

          </h4>
          <h1>$ 4,500
          </h1>
          <h5>12 Bookings

          </h5>
        </div>
        <div class="base-block">
          <h4>Confirmed Bookings

          </h4>
          <h1>$ 43,000

          </h1>
          <h5>300 Bookings

          </h5>
        </div>

      </div>

    </div>
  </div>