我是 bootstrap
的初学者 任何关于如何像这样使用 bootstrap-04
的想法,看看我的形象,我想让所有设备都是这种类型,但是它不起作用请帮我做这个,
谢谢
看我的代码 code sample
最佳答案
您需要在 .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>
关于css - Bootstrap 4 导航选项卡问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45648342/