最佳答案

側邊欄在響應式設計中起到很大的作用，當屏幕小到手機的屏幕時，能夠自適應屏幕大小的側邊欄固然能夠為網站添加色彩，那么在Bootstrap的框架中提供了導航條和下拉菜單的組件，詳情請自行到官網Bootstrap的文檔查看，這里就不作介紹了。 本文是將其中的導航條和下拉菜單進行結合，然后設計并改進了側邊欄的制作。 html:

css: .mynavbar{ background-color: #fff; border:none; } .navbar-header,#side-item{ background-color: #0b3558; } #side-menu>ul>li>a{ color:#fff; font-size: 18px; font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } #side-menu>ul{ width: 100%; } #side-menu>ul>li{ text-align: center; width: 16%; margin-left: 5px; } #side-menu .dropdown-menu { border: none; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); } #side-item .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover,#side-item>li>a:focus,#side-item >li>a:hover { color: #24b0ff; text-decoration: none; background-color: transparent; } .btn-sider{ float: left; border:none; outline: none; margin-left: 10px; } .mynavbar .btn-sider .icon-bar{ background-color:#fff; width:23px; height:3px; } .mynavbar .btn-sider:focus, .mynavbar .btn-sider:hover { background-color: transparent; } @media (max-width: 768px) { .container { padding-left: 0px; } #side-menu{ border: none; } #side-item{ background: rgba(43, 54, 67, 0.97); } #side-menu>ul { margin-top: 0px; margin-right: 0px; margin-left: -15px; margin-bottom: 0px; width: 40%; height: 999px; } #side-menu>ul>li { text-align: left; width:100%; margin-left:0px; } #side-menu>ul>li a{ font-size:16px; } #side-item>li>a:focus,#side-item >li>a:hover,#side-item .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{ background-color: #38a99c; color:#fff; } #side-menu .dropdown-menu{ box-shadow:none; } #side-menu .dropdown-menu li a{ padding-top:10px; color:#fff; } } 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本58車。 如果大家還想深入學習，可以點擊這里進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程 Bootstrap實戰教程

回答者：kangjihuacs2016-09-19 00:00