ブートストラップ4ナビタブの問題

Question

イム初心者のためのbootstrapbootstrap-04のような使用方法のアイデア、私のイメージを見て、私はすべてのデバイスがこのタイプであるようにしたいが、それを作ってください、

おかげ

私のコードを見て code sample

Answer 1

あなたが旧姓dが追加するwidth:50%;.nav-tabs li内側と.base-block

.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>