引導邊欄和頁面內容已合並

Question

我正在嘗試使用引導程序側邊欄，該邊欄在較小的屏幕上變為水平導航。 除了頁面內容（必須在側欄的右側）顯示在側欄的頂部，其他所有內容都正常運行。

JS小提琴

我的代碼：

  .nav-side-menu { overflow: auto; font-family:'Montserrat', sans-serif; font-size: 12px; font-weight: 200; background-color: #FFF; position: fixed; top: 0px; width: 250px; height: 100%; color: #000; border-right:solid 1px black; } .nav-side-menu .brand { background-color: #FFF; line-height: 50px; display: block; text-align: center; font-size: 14px; } .logoimg { width: 70%; margin-top: 20px; background: url('logomedium.png'); background-size: 200px 133px; height: 133px; width: 200px; /* margin-left:auto; margin-right:auto; */ margin-left:20px; background-position: center; margin-bottom: 80px; } .nav-side-menu .toggle-btn { display: none; } .nav-side-menu ul, .nav-side-menu li { list-style: none; padding: 0px; margin: 0px; line-height: 35px; cursor: pointer; /* .collapsed{ .arrow:before{ font-family: FontAwesome; content: "\\f053"; display: inline-block; padding-left:10px; padding-right: 10px; vertical-align: middle; float:right; } } */ } .nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before { font-family: FontAwesome; content: "\\f078"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; float: right; } .nav-side-menu ul .active, .nav-side-menu li .active { border-left: 3px solid #eeeeee; background-color: #eeeeee; } .nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active { color: #d19b3d; } .nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a { color: #d19b3d; } .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li { background-color: #eeeeee; border: none; line-height: 28px; border-bottom: 1px solid #23282e; margin-left: 0px; } .nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover { background-color: #020203; } .nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before { font-family: FontAwesome; content: "\\f105"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; } .nav-side-menu li { padding-left: 0px; text-align: center; /*border-left: 3px solid #2e353d; */ padding-bottom: 15px; padding-top: 15px; /*border-bottom: 1px solid #23282e;*/ } .nav-side-menu li a { text-decoration: none; font-size:12pt; color: #000000; text-transform: uppercase; vertical-align: middle; } .nav-side-menu li a { padding-left: 10px; width: 20px; padding-right: 20px; } .nav-side-menu li a:focus { outline: 0; } .nav-side-hr { width: 75%; border: none; height: 1px; /* Set the hr color */ color: #333; /* old IE */ background-color: #333; /* Modern Browsers */ } .nav-side-menu li:hover { /*border-left: 3px solid##eeeeee;*/ background-color: #eeeeee; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } @media (max-width: 767px) { .nav-side-menu { position: relative; width: 100%; margin-bottom: 10px; } .logoimg { margin-top: 10px; background: url('logohorizontal.png'); background-size: 200px 48px; height: 48px; margin-bottom: 10px; width: 200px; /* margin-left:auto; margin-right:auto; */ margin-left: 5px; background-position: center; } .nav-side-menu .toggle-btn { display: block; cursor: pointer; position: absolute; right: 10px; top: 10px; z-index: 10 !important; padding: 3px; background-color: #ffffff; color: #AF2024; width: 40px; text-align: center; } .brand { text-align: left !important; font-size: 22px; padding-left: 20px; border-bottom: 1px solid black; line-height: 50px !important; } } @media (min-width: 767px) { .nav-side-menu .menu-list .menu-content { display: block; } } body { margin: 0px; padding: 0px; } 

  <div id="wrapper"> <!-- Sidebar --> <div class="nav-side-menu"> <div class="brand"><div class="logoimg" />LOGO PLACEHOLDER</div></div> <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> <div class="menu-list"> <ul id="menu-content" class="menu-content collapse out"> <li> <a href="#"> <i class=""></i> About Us </a> </li> <li data-toggle="collapse" data-target="#products" class="collapsed"> <a href="#"><i class=""></i> Services </a> </li> <li> <ul class="sub-menu collapse" id="products"> <li class="active"><a href="#">CSS3 Animation</a></li> <li><a href="#">General</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Tabs & Accordions</a></li> <li><a href="#">Typography</a></li> <li><a href="#">FontAwesome</a></li> <li><a href="#">Slider</a></li> <li><a href="#">Panels</a></li> <li><a href="#">Widgets</a></li> <li><a href="#">Bootstrap Model</a></li> </ul> </li> <li data-toggle="collapse" data-target="#service" class="collapsed"> <a href="#"><i class=""></i> Contact us </a> </li> <li> <ul class="sub-menu collapse" id="service"> <li>New Service 1</li> <li>New Service 2</li> <li>New Service 3</li> </ul> </li> <hr class="nav-side-hr" /> <li data-toggle="collapse" data-target="#new" class="collapsed"> <a href="#"><i class=""></i> RATES </a> </li> <li> <ul class="sub-menu collapse" id="new"> <li>New New 1</li> <li>New New 2</li> <li>New New 3</li> </ul> </li> <li> <a href="#"> <i class=""></i> TRACKING SYSTEM </a> </li> <li> <a href="#"> <i class=""></i> QUOTE ME </a> </li> <hr class="nav-side-hr" /> <li> <a href="#"> <i class=""></i> FIND US </a> </ul> </div> </div> <!-- End Sidebar --> <!-- Page Content --> <div id="page-content-wrapper"> <div class="container-fluid"> <div class="row"> <div class="col-lg-12"> <h1>Simple Sidebar</h1> <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> </div> </div> </div> </div> </div> 

更新：如建議的那樣向頁面包裝器添加了填充，但是當我向頁面內容添加文本時，sidenav鏈接停止工作/懸停。 JS FIDDLE https://jsfiddle.net/y3eL6m8v/4/

Answer 1

請在您的CSS中添加此代碼：

    @media (min-width: 768px)
    {
    #page-content-wrapper 
       {
        padding: 20px 20px 20px 250px;
        position: relative;
        }
    }

檢查這個小提琴https://jsfiddle.net/y3eL6m8v/2/

Answer 2

在媒體查詢中，您應該添加一個padding-left，其寬度值從sidenav到page-content-wrapper類。

@media(min-width:768px) {
  #page-content-wrapper {
    padding-left: 250px;
    position: relative;
  }
}

單擊此處獲取jsfiddle