<分区>
嘿，我有一个菜单，它是一个选项卡列表，每个选项卡都使用垂直线与其他选项卡分开。我想弄清楚如何使此菜单更具响应性，例如制作某种汉堡包菜单。到目前为止我没有成功，因为我不熟悉在没有 Bootstrap 的情况下制作响应式组件的原理。 代码在这里
.tabs {
padding: 0;
}
.tabs > li {
list-style-type: none;
display: inline-block;
height: 25px;
line-height: 25px;
padding:0px 15px ;
color: #535355;
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>