发表新帖
发表新帖

Bootstrap Off Canvas Show Full Height

后端 未结
关注
4 1096
暗喜
暗喜 2020-12-12 05:06

I am trying to use Bootstrap off canavas left side bar to toggle on small devices.

here is the bootply code example:

www.bootply.com/C2wQEkdSAn

The p

4条回答
  • 囚心锁ツ
    囚心锁ツ (楼主)
    2020-12-12 05:32

    Her's a complete page:

    










Starter Template for Bootstrap






 


 
    
    Project name

    

    

    


    
    
    
        
    
             Project name
        
    

        
    
            
        
    
    
    

    


    
    
    
        

        
    
            
    

            
    
                
    Hello, world!
    

                
    This is an example to show the potential of an offcanvas
                layout pattern in Bootstrap. Try some responsive-range
                viewport sizes to see it in action.
    
            
    

            
    
                
    
                    
    Heading
    

                    
    Bootstrap is a front-end framework that uses CSS and
                    JavaScript to facilitate responsive Web design. Bootply
                    is a playground for Bootstrap that enables developers
                    and designers to test, prototype and create mockups
                    using Bootstrap friendly HTML, CSS and Javascript.
    

                    
    View details
                    »
    
                
    

                
    
                    
    Heading
    

                    
    Bootply is a playground for Bootstrap that enables
                    developers and designers to test, prototype and create
                    mockups using Bootstrap friendly HTML, CSS and
                    Javascript. Bootstrap is a front-end framework that
                    uses CSS and JavaScript to facilitate responsive Web
                    design.
    

                    
    View details
                    »
    
                
    

                
    
                    
    Heading
    

                    
    Bootstrap is a front-end framework that uses CSS and
                    JavaScript to facilitate responsive Web design. Bootply
                    is a playground for Bootstrap that enables developers
                    and designers to test, prototype and create mockups
                    using Bootstrap friendly HTML, CSS and Javascript.
    

                    
    View details
                    »
    
                
    
            
    

            
    
                
    
                    
    Heading
    

                    
    Bootstrap is a front-end framework that uses CSS and
                    JavaScript to facilitate responsive Web design. Bootply
                    is a playground for Bootstrap that enables developers
                    and designers to test, prototype and create mockups
                    using Bootstrap friendly HTML, CSS and Javascript.
    

                    
    View details
                    »
    
                
    

                
    
                    
    Heading
    

                    
    Bootply is a playground for Bootstrap that enables
                    developers and designers to test, prototype and create
                    mockups using Bootstrap friendly HTML, CSS and
                    Javascript. Bootstrap is a front-end framework that
                    uses CSS and JavaScript to facilitate responsive Web
                    design.
    

                    
    View details
                    »
    
                
    

                
    
                    
    Heading
    

                    
    Bootstrap is a front-end framework that uses CSS and
                    JavaScript to facilitate responsive Web design. Bootply
                    is a playground for Bootstrap that enables developers
                    and designers to test, prototype and create mockups
                    using Bootstrap friendly HTML, CSS and Javascript.
    

                    
    View details
                    »

    Here's a solution using offcanvas.js from http://jasny.github.io/bootstrap/javascript/#offcanvas

    and some custom CSS:

    body {
padding-top: 50px;
}
.content_wrap {
padding: 40px 15px;
text-align: center;
}
footer {
background-color: #222;
color: #777;
}
/*  * Off Canvas  * --------------------------------------------------
                */
@media screen and (max-width: 768px) {
  .row-offcanvas {
  }
  #sidebar {
    display:none;
  }
  #sidebar.in {
    display:block;
    position: fixed;
    z-index: 1030;
    top: 0px;
    bottom: 0px;
    overflow-y: auto;
    border-radius: 0px;
    padding:0px;
    min-height:100%;
    width:300px;
   }
   #sidebar.in .well {
    margin:0px;
    border-radius: 0px;
    border:none;
    min-height:100%;
   }
}

    you can see full code here

    and a full-screen result here

    UPDATE - to match your code

    /*
* Off Canvas
* --------------------------------------------------
*/
@media screen and (max-width: 768px) {

 .row-offcanvas {
  position: relative;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
 }

 .row-offcanvas-left.sidebar-offcanvas {
  margin-left: -50%;
 }

 .sidebar-offcanvas {
  width: 50%;
 }
}

    0 讨论(0)
 看不清?
提交回复
热议问题