1
は、ブートストラップ4全幅ドロップダウンメニューブートストラップ4でサブメニュー全幅を作る方法を
.dropdown-menu {
min-width: auto;
width: 100%;
height: auto;
text-align: center;
border-radius: 0;
border-width: 0px;
margin-top: -1px;
padding: 0 0;
max-height: 700px;
overflow: auto;
}
.dropdown-menu hr {
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.dropdown-menu ul>li {
padding-top: 0px;
}
.material-tab {
margin: 0 auto;
width: 100%;
border-bottom: 0px;
padding: 0 50px;
}
.header-inner {
padding: 15px 0;
min-width: auto;
margin: 0 auto;
}
.tab-header {
background: #EB3137;
padding: 0 15px;
color: #fff;
-webkit-box-shadow: 0px 3px 5px 0px rgba(194, 194, 194, 1);
-moz-box-shadow: 0px 3px 5px 0px rgba(194, 194, 194, 1);
box-shadow: 0px 3px 5px 0px rgba(194, 194, 194, 1);
}
.nav.nav-tabs>li>a:focus,
.nav.nav-tabs>li>a:hover {
background: transparent;
outline: 0;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:active {
background: transparent;
color: #FFF;
cursor: default;
border: 0;
}
.nav-tabs>li>a {
position: relative;
color: rgba(255, 255, 255, 0.7);
border: 0px;
font-weight: bold;
padding: 12px 15px 14px 15px;
}
.nav-tabs>li>a:hover {
color: rgba(255, 255, 255, 0.8);
background: transparent;
}
ul.nav-tabs>li.active>a:after {
display: block;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: white;
}
.tab-content.white-bg-tabs {
padding: 15px;
}
.tab-content.white-bg-tabs .tab-pane {
max-width: 960px;
margin: 0 auto;
background: white;
padding: 10px;
text-align: center;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #ddd;
}
.list-inline h6 p {
font-family: "Raleway Bold", sans-serif;
text-align: left;
color: #000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<header>
<div class="container">
<div class="row">
<nav class="navbar navbar-default">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<ul class="nav nav-tabs animation" role="tablist">
<li class="active"><a href="#cars" role="tab" data-toggle="tab">Cars</a></li>
<li><a href="#vans" role="tab" data-toggle="tab">Vans & Pickup</a></li>
<li><a href="#suv" role="tab" data-toggle="tab">SUVs & Crossover</a></li>
<li><a href="#mpv" role="tab" data-toggle="tab">MPVs</a></li>
<li><a href="#hybrid" role="tab" data-toggle="tab">Hybrid</a></li>
<li><a href="#performance" role="tab" data-toggle="tab">Performance</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content white-bg-tabs">
<div class="tab-pane active" id="cars" role="tabpanel">
00. SOME ITEM w IMAGE/LIST HERE
</div>
<div class="tab-pane" id="vans" role="tabpanel">
0. SOME ITEM w IMAGE/LIST HERE
</div>
<div class="tab-pane" id="suv" role="tabpanel">
1. SOME ITEM w IMAGE/LIST HERE
</div>
<div class="tab-pane" id="suv" role="tabpanel">
2. SOME ITEM w IMAGE/LIST HERE
</div>
<div class="tab-pane" id="mpv" role="tabpanel">
3. SOME ITEM w IMAGE/LIST HERE
</div>
<div class="tab-pane" id="hybrid" role="tabpanel">
4. SOME ITEM w IMAGE/LIST HERE
</div>
<div class="tab-pane" id="performance" role="tabpanel">
5. SOME ITEM w IMAGE/LIST HERE
</div>
</div>
<!-- container -->
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity = "sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin = "anonymous" > </script>、私はそれをやって問題を抱えています。まだ運がないと私はそれを駄目にする。私はドロップダウンの中にタブとイメージを持っているので、それを全幅にしたいのです。ユーザーが適切に使用することができます。 私はそれがブートストラップ3で動作させることができるよしかし、ブートストラップに取り組むことができるようになり、ブートストラップ3で動作しない多くの機能を追加すること4.
<nav class="navbar navbar-default ">
<ul class="nav justify-content-end">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<ul class="nav nav-tabs animation" role="tablist">
<li class="active"><a href="#cars" role="tab" data-toggle="tab">Cars</a></li>
<li><a href="#vans" role="tab" data-toggle="tab">Vans & Pickup</a></li>
<li><a href="#suv" role="tab" data-toggle="tab">SUVs & Crossover</a></li>
<li><a href="#mpv" role="tab" data-toggle="tab">MPVs</a></li>
<li><a href="#hybrid" role="tab" data-toggle="tab">Hybrid</a></li>
<li><a href="#performance" role="tab" data-toggle="tab">Performance</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content white-bg-tabs">
<div class="tab-pane active" id="cars" role="tabpanel">
<ul class="list-inline">
<div class="row">
<li class="col col-md-4">
<a href=""><img src="img/dropdown/cars/choose_car1.png"></a>
<h6 class="price-notice">* price may vary
<br>
<p>2017 CAR1
<br>P 611,000 starting</p>
</h6>
</li>
<li class="col col-md-4">
<a href=""><img src="img/dropdown/cars/choose_CAR2.png"></a>
<h6 class="price-notice">* price may vary
<br>
<p>2017 CAR 2
<br>P 896,000 starting</p>
</h6>
</li>
<li class="col col-md-4">
<a href=""><img src="img/dropdown/cars/choose_car3.png"></a>
<h6 class="price-notice">* price may vary
<br>
<p>2017 CAR3
<br>P 1,595,000 starting</p>
</h6>
</li>
<li class="col col-md-4">
<a href=""><img src="img/dropdown/cars/choose_CAR4.png"></a>
<h6 class="price-notice">* price may vary
<br>
<p>2017 CAR4
<br>P 745,000 starting</p>
</h6>
</li>
<li class="col col-md-4">
<a href=""><img src="img/dropdown/cars/choose_CAR5.png"></a>
<h6 class="price-notice">* price may vary
<br>
<p>2017 CAR5
<br>P 526,000 starting</p>
</h6>
</li>
</div>
</ul>
</div>
</div>
<!-- container -->
</div>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</nav>
これは、ブートストラップ3の私の作業CSSです
.dropdown-menu {
min-width:auto;
width: 100%;
height: auto;
text-align: center;
border-radius: 0;
border-width: 0px;
margin-top: -1px;
padding: 0 0;
max-height: 700px;
overflow: auto;
}
.dropdown-menu hr {
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.dropdown-menu ul > li{
padding-top: 0px;
}
動作するコードを入力してください。 –
私はそれを追加しました:) – jmv
あなたは完全な容器の幅をしたいですか？ –