引導導航欄側邊欄覆蓋頁的文本

鏈接到我使用導航欄側邊欄：http://bootsnipp.com/snippets/featured/responsive-navigation-menu 引導導航欄側邊欄覆蓋頁的文本

我無法搞清楚如何從一個頁面上阻止文本停止此欄。我以前使用的是導航欄，它們似乎與頁面的其餘部分分開，所以網頁片段不會消失。我知道這不是官方的bootstrap導航欄，因爲我認爲他們不完全支持側邊欄。

// Place all the styles related to the Welcome controller here. 
 
// They will automatically be included in application.css. 
 
// You can use Sass (SCSS) here: http://sass-lang.com/ 
 

 

 

 

 

 

 

 

 
/* BELOW HERE IS ALL NAVBAR CSS */ 
 
.nav-side-menu { 
 
    overflow: auto; 
 
    font-family: verdana; 
 
    font-size: 12px; 
 
    font-weight: 200; 
 
    background-color: #2e353d; 
 
    position: fixed; 
 
    top: 0px; 
 
    width: 300px; 
 
    height: 100%; 
 
    color: #e1ffff; 
 
} 
 
.nav-side-menu .brand { 
 
    background-color: #23282e; 
 
    line-height: 50px; 
 
    display: block; 
 
    text-align: center; 
 
    font-size: 14px; 
 
} 
 
.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 #d19b3d; 
 
    background-color: #4f5b69; 
 
} 
 
.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: #181c20; 
 
    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; 
 
    border-left: 3px solid #2e353d; 
 
    border-bottom: 1px solid #23282e; 
 
} 
 
.nav-side-menu li a { 
 
    text-decoration: none; 
 
    color: #e1ffff; 
 
} 
 
.nav-side-menu li a i { 
 
    padding-left: 10px; 
 
    width: 20px; 
 
    padding-right: 20px; 
 
} 
 
.nav-side-menu li:hover { 
 
    border-left: 3px solid #d19b3d; 
 
    background-color: #4f5b69; 
 
    -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; 
 
    } 
 
    .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: #000; 
 
    width: 40px; 
 
    text-align: center; 
 
    } 
 
    .brand { 
 
    text-align: left !important; 
 
    font-size: 22px; 
 
    padding-left: 20px; 
 
    line-height: 50px !important; 
 
    } 
 
} 
 
@media (min-width: 767px) { 
 
    .nav-side-menu .menu-list .menu-content { 
 
    display: block; 
 
    } 
 
} 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
/* ABOVE HERE IS ALL NAVBAR CSS */

<!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"> 
 
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
 

 
    <title>Index</title> 
 

 

 
</head> 
 
<body> 
 

 

 
<div class="container-fluid"> 
 
<div class="nav-side-menu"> 
 
    <div class="brand">Navbar Sidebar</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="fa fa-dashboard fa-lg"></i> Dashboard 
 
        </a> 
 
       </li> 
 

 
       <li data-toggle="collapse" data-target="#products" class="collapsed active"> 
 
        <a><i class="fa fa-gift fa-lg"></i> 
 
        <%= link_to("Contact", 
 
         {:controller => 'welcome', 
 
         :action => 'contact' 
 
         }) %>     
 
        <span class="arrow"></span></a> 
 
       </li> 
 
       
 
       
 
       <li data-toggle="collapse" data-target="#products" class="collapsed active"> 
 
        <a href="#"><i class="fa fa-gift fa-lg"></i> Help <span class="arrow"></span></a> 
 
       </li> 
 
       
 

 

 
       <li data-toggle="collapse" data-target="#service" class="collapsed"> 
 
        <a href="#"><i class="fa fa-globe fa-lg"></i> Lessons <span class="arrow"></span></a> 
 
       </li> 
 
       <ul class="sub-menu collapse" id="service"> 
 
        <li>Lesson 1</li> 
 
        <li>Lesson 2</li> 
 
        <li>Lesson 3</li> 
 
       </ul> 
 

 

 
       <li> 
 
        <a href="#"> 
 
        <i class="fa fa-user fa-lg"></i> Profile 
 
        </a> 
 
        </li> 
 

 
       <li> 
 
        <a href="#"> 
 
        <i class="fa fa-users fa-lg"></i> Users 
 
        </a> 
 
       </li> 
 
      </ul> 
 
    </div> 
 
</div> 
 

 

 

 
<div class="main"> 
 

 
    <div class="row"> 
 
    <div class="col-md-8"> 
 
     <h1>Navbar Sidebar</h1> 
 
     <p> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p> 
 
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
     <p> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p> 
 

 
    </div> 
 

 

 

 

 

 

 
</div> <!-- end main div --> 
 

 

 

 
</div> <!-- close container fluid --> 
 

 

 
</body> 
 
</html>

顯然imgur目前是有問題，和其他人（包括我自己）無法上傳使用imgur圖片到堆棧，所以我已經包括了我所遇到的問題的gyazo快照：

https://gyazo.com/ad10f592a97335189c053d04411daff6

來源

2017-02-28 Dpet123

所以你說你想讓它把內容「推」到右邊而不是覆蓋內容？ – ZimSystem

是的。我不希望導航欄干擾網頁上的任何內容。但是，不必在每個頁面上移動內容，是否有一種方法可以將頁面的該區域指定給導航欄？ – Dpet123

你將不得不在所有的響應斷點的改變填充左兩個.container和container-fluid在CSS中，這樣看起來很適合你的設計。注意：這些是默認引導程序斷點，如果您有自定義引導程序斷點，請編輯這些斷點以符合您的要求。

@media only screen and (min-width : 320px) { 
    .container, .container-fluid { 
    padding-left: 100px; // just an example 
    } 
} 

@media only screen and (min-width : 480px) { 
    .container, .container-fluid { 
    padding-left: 100px; // just an example 
    } 
} 

@media only screen and (min-width : 768px) { 
    .container, .container-fluid { 
    padding-left: 100px; // just an example 
    } 
} 

@media only screen and (min-width : 992px) { 
    .container, .container-fluid { 
    padding-left: 100px; // just an example 
    } 
} 

@media only screen and (min-width : 1200px) { 
    .container, .container-fluid { 
    padding-left: 100px; // just an example 
    } 
}

來源

2017-02-28 18:59:19 eeetee

將此應用於.container和.container-fluid將我的側邊欄移至右側以及我的文本內容。但是，我將這些規則應用於我的「主」div，並且它似乎起作用。 – Dpet123

也許讓一個div的導航欄之外的所有內容，並給予該分區上留有一定餘量等它的東西沒有被導航欄將覆蓋工作。

來源

2017-02-28 18:59:39

引導導航欄側邊欄覆蓋頁的文本

回答

相關問題