Я создаю одностраничное приложение, которое должно реагировать на все устройства.Пока все работает нормально, но есть одна вещь, которая бросилась в глаза.Вкладки на главном экране отображаются горизонтально при размере экрана lg и md.Если я включаю Responsive Design Mode в браузере, они отображаются вертикально.Эта презентация занимает много места на экране.Мне интересно, могут ли они отображаться в виде складной кнопки, где пользователь может щелкнуть и выбрать вкладку?Это позволило бы сэкономить место на экране и определенно выглядеть лучше.Вот пример того, что я имею до сих пор:
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
min-height: 45px;
padding: 5px;
width: auto;
}
.brand2 {
height: 100%;
height: 50px;
padding: 5px;
margin-left: 5px;
width: auto;
display: block;
}
.my-jumbotron {
padding-top: 45px;
padding-bottom: 10px;
margin-bottom: 5px;
background-color: #333;
color: #fff;
}
.page-footer {
margin-bottom: 5px;
background-color: #333;
border-radius: 6px;
padding: 5px;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single Page Application</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="row">
<div class="col-xs-4 col-sm-6">
<a class="navbar-brand" data-toggle="tooltip" data-placement="top" title="MyApp home page" href="https://www.example.com" target="_blank"><img class="img-rounded" src="images/logo.png" alt="MyApp" /></a>
</div>
<div class="col-xs-4 col-md-6">
<img class="img-rounded brand2" src="images/app.jpg" alt="Img" />
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav" id="nav_menu">
<li><a href="#" data-id="home">Home</a></li>
<li><a href="#" data-id="contact">Contact</a></li>
<li><a href="#" data-id="help">Help</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron my-jumbotron">
<h2>Single Page Application</h2>
</div>
<div id="main_container">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
<li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
<li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane my-tab-pane fade in active">
<h3>Tab 1</h3>
<p>Show tab 1.</p>
</div>
<div id="tab2" class="tab-pane my-tab-pane fade">
<h3>Tab 2</h3>
<p>Show tab 2.</p>
</div>
<div id="tab3" class="tab-pane my-tab-pane fade">
<h3>Tab 3</h3>
<p>Show tab 3.</p>
</div>
<div id="tab4" class="tab-pane my-tab-pane fade">
<h3>Tab 4</h3>
<p>Show tab 4.</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<footer class="page-footer">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<a href="http://example1.com" data-toggle="tooltip" data-placement="top" title="example1.com">Example1.com</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<a href="http://example2.com/" data-toggle="tooltip" data-placement="top" title="example2.com">Example2.com</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<a href="http://example3.com/" data-toggle="tooltip" data-placement="top" title="example3.com">Example3.com</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<a href="http://example4.com/" data-toggle="tooltip" data-placement="top" title="example4.com">Example4.com</a>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Если вы посмотрите на пример выше, вы увидите вкладки друг над другом.Если вы посмотрите в верхнем правом углу, вы увидите кнопку, которую вы можете нажать.Затем вы получите список пунктов в меню Home, Contact или Help.Хотелось бы, чтобы на маленьком экране было что-то похожее на вкладки.Если кто-то знает хороший способ добиться этого, пожалуйста, дайте мне знать.