ちょっと、私はタブのリストであるメニューを持っている、各タブは、垂直線を使用して、他のタブから別です。私は、このメニューをより敏感にする方法を見つけようとしています。例えば、ハンバーガーメニューを作るなどです。これまでのところ、ブートストラップなしで応答性の高いコンポーネントを作成するという原則に精通していないため、私は成功しませんでした。 コードは、あなたがCSSで@media
クエリを使用することができ、ここでレスポンシブメニュー(ハンバーガーメニュー)を作成する方法
.tabs {
padding: 0;
}
.tabs > li {
list-style-type: none;
display: inline-block;
height: 25px;
line-height: 25px;
padding:0px 15px ;
color: #535355; \t
font-size: 18px;
font-family:'Segue UI', Calibri, arial, verdana, sans-serif;
font-weight:bold;
text-decoration: none;
vertical-align: top;
cursor: pointer;
border-right: 1px solid #D1D1D1;
}
.tabs > li:last-child{
border-right:none;
}
.tabs-link{
color: #4C4C4C;
font-size: 18px;
text-decoration: none;
}
.tabs-link:hover,
.tabs-link:link{
color: #3983C4;
text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav id="tabs_navbar" class="navbar navbar-collapse">
<ul class="tabs">
<!-- tabs navbar-->
<li class="tabs-item">
<a href="#/AnalyticsSummary" class="tabs-link">Analytics Summary</a>
</li>
<li class="tabs-item">
<a href="#/TDCG" class="tabs-link">TDCG</a>
</li>
<li class="tabs-item">
<a href="#/keygas" class="tabs-link">Key Gas</a>
</li>
<li class="tabs-item">
<a href="#/DuvalTriangle" class="tabs-link">Duval Triangle</a>
</li>
<li class="tabs-item">
<a href="#/DuvalPentagon" class="tabs-link">Duval Pentagon</a>
</li>
<li class="tabs-item">
<a href="#/NEI" class="tabs-link">NEI</a>
</li>
<li class="tabs-item">
<a href="#/PTX" class="tabs-link">PTX</a>
</li>
<li class="tabs-item">
<a href="#/GasTrends" class="tabs-link">Gas Trends</a>
</li>
<li class="tabs-item">
<a href="#/DataTable" class="tabs-link">Data Table</a>
</li>
<li class="tabs-item">
<a href="#/Playground" class="tabs-link">Playground</a>
</li>
<li class="tabs-item">
<a href="#/AnalyticsSettings" class="tabs-link">Analytics Settings</a>
</li>
</ul>
</nav>
なぜドン」動作しますブートストラップを使用していますか? –