安排侧栏，导航栏和页脚

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    /* Margin bottom by footer height */ 
 
    margin-bottom: 60px; 
 
    overflow-x: hidden; 
 
} 
 
/*footer*/ 
 
.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 

 
    /* Set the fixed height of the footer here */ 
 
    height: 60px; 
 
    background-color: #f5f5f5; 
 
} 
 

 
/*navbar*/ 
 
.navbar{ 
 
\t background-color:black; 
 
\t 
 
\t font-family: sans-serif; 
 
\t font-size: 20px; 
 
} 
 
.navbar-brand{ 
 
\t font-size: 20px; 
 
\t 
 
} 
 
.logo1{ 
 
\t height: 50px; 
 
\t width: 75px; 
 
\t opacity: 0.1px; 
 
\t left: 0px; 
 
\t top: 0px; 
 
\t position: absolute; 
 
} 
 

 

 
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
 
color: #000; /*Sets the text hover color on navbar*/ 
 
} 
 

 
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > 
 
a:hover, .navbar-default .navbar-nav > .active > a:focus { 
 
color: white; /*BACKGROUND color for active*/ 
 
background-color: #030033; 
 
} 
 

 
    .navbar-default { 
 
    background-color: #0f006f; 
 
    border-color: #030033; 
 
} 
 

 
    .dropdown-menu > li > a:hover, 
 
    .dropdown-menu > li > a:focus { 
 
    color: #262626; 
 
    text-decoration: none; 
 
    background-color: #66CCFF; /*change color of links in drop down here*/ 
 
    } 
 

 
.nav > li > a:hover, 
 
.nav > li > a:focus { 
 
    text-decoration: none; 
 
    background-color: silver; /*Change rollover cell color here*/ 
 
    } 
 

 

 
    .navbar-default .navbar-nav > li > a { 
 
    color: whites; /*Change active text color here*/ 
 
    } 
 
body > .container { 
 
    padding: 60px 15px 0; 
 
} 
 
.container .text-muted { 
 
    margin: 20px 0; 
 
} 
 
/* side bar*/ 
 
/* Toggle Styles */ 
 

 
#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled { 
 
    padding-left: 250px; 
 
} 
 

 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: fixed; 
 
    left: 250px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -250px; 
 
    overflow-y: auto; 
 
    background: #000; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 250px; 
 
} 
 

 
#page-content-wrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 15px; 
 
} 
 

 
#wrapper.toggled #page-content-wrapper { 
 
    position: absolute; 
 
    margin-right: -250px; 
 
} 
 

 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 250px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
\t z-index: 1; 
 
} 
 

 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 

 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #999999; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background: rgba(255,255,255,0.2); 
 
} 
 

 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 

 
.sidebar-nav > .sidebar-brand { 
 
    height: 65px; 
 
    font-size: 18px; 
 
    line-height: 60px; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a { 
 
    color: #999999; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 
.btn>.btn-default{ 
 

 
} 
 

 

 
@media(min-width:768px) { 
 
    #wrapper { 
 
     padding-left: 0; 
 
    } 
 

 
    #wrapper.toggled { 
 
     padding-left: 250px; 
 
    } 
 

 
    #sidebar-wrapper { 
 
     width: 0; 
 
    } 
 

 
    #wrapper.toggled #sidebar-wrapper { 
 
     width: 250px; 
 
    } 
 

 
    #page-content-wrapper { 
 
     padding: 20px; 
 
     position: relative; 
 
    } 
 

 
    #wrapper.toggled #page-content-wrapper { 
 
     position: relative; 
 
     margin-right: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!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>Bootstrap 101 Template</title> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
\t <link rel="stylesheet" type="text/css" href="style1.css" /> 
 
\t <link href="bootstrap.min1.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
    <!--top bar--> 
 
    <nav class="navbar navbar-inverse navbar-static-top"> 
 
\t <div class="container"> 
 
\t \t <div class="navbar-header"> 
 
\t \t \t <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
\t \t \t \t <span class="sr-only">Toggle navigation</span> 
 
\t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t </button> 
 
\t \t \t <img class="logo1" src="images/capture.png" alt=" logo"> 
 
\t \t \t <a class="navbar-brand" href="#">Web Portax</a> 
 
\t \t </div> 
 
\t \t <form class="navbar-form navbar-left" role="search"> 
 
\t \t <div class="form-group"> 
 
\t \t <input type="text" class="form-control" placeholder="Search"> 
 
\t \t </div> 
 
\t \t <button type="submit" class="btn btn-default">Submit</button> 
 
\t \t </form> 
 
\t \t <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
\t \t \t <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t \t <li><a href="#">Account Setting</a></li> 
 
\t \t \t \t <li><a href="#">Message</a></li> 
 
\t \t \t \t <li class="dropdown"> 
 
\t \t \t \t \t <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a> 
 
\t \t \t \t \t <ul class="dropdown-menu"> 
 
\t \t \t \t \t \t <li><a href="#">Log Out</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Edit Profile</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Manage prefrences</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </li> \t 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> 
 
</nav> 
 

 
<div id="wrapper"> 
 

 
     <!-- Sidebar --> 
 
     <div id="sidebar-wrapper"> 
 
      <ul class="sidebar-nav"> 
 
       <li class="sidebar-brand"> 
 
        <a href="#"> 
 
         Start Bootstrap 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Dashboard</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Shortcuts</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Overview</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Events</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">About</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Services</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Contact</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     <!-- /#sidebar-wrapper --> 
 

 
     <!-- Page Content --> 
 
     <div id="page-content-wrapper"> 
 
      <div class="container-fluid"> 
 
       <div class="row"> 
 
        <div class="col-lg-12"> 
 
         
 
         <a href="#menu-toggle" class="btn btn-default" id="menu-toggle"></a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <!-- /#page-content-wrapper --> 
 

 
    </div> 
 
    <!-- /#wrapper --> 
 

 
    <!-- jQuery --> 
 
    <script src="jquery1.js"></script> 
 

 
    <!-- Bootstrap Core JavaScript --> 
 
    <script src="bootstrap.min1.js"></script> 
 

 
    <!-- Menu Toggle Script --> 
 
    <script> 
 
    $("#menu-toggle").click(function(e) { 
 
     e.preventDefault(); 
 
     $("#wrapper").toggleClass("toggled"); 
 
    }); 
 
    </script> 
 

 

 

 
<!-- body--> 
 

 
    <!-- Footer --> 
 
    <div class="container"> 
 
     <div class="page-header"> 
 
     <h1>Content</h1> 
 
     </div> 
 
     
 
    </div> 
 

 
    <footer class="footer"> 
 
     <div class="container"> 
 
\t <div class="row"> 
 
     <p class="text-muted"> All rights reserved. </p> 
 
\t \t </div> 
 
     </div> 
 
    </footer> 
 
\t 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    </body> 
 
</html>

嘿家伙谁能帮助我为我现在的页面看起来像这样[输入图像的描述在这里]

enter image description here

当我点击toogle来展开我的边栏吧，看起来像这样。 enter image description here

我该如何修复标题和侧边栏之间的空格？我怎样才能将小灰点的东西切换到左侧的边角？最后我如何才能将“Web Portax”从顶部导航栏稍微向右移动，因此当我将其最小化时，徽标和文本不会一起揉搓？

我是新来的html的东西，所以很抱歉业余问题。谢谢！

来源

2017-07-07 rheza paleva

使用CSS中的margin属性来调整元素周围的空间。

实施例：
margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px;

和padding元件中的内容和元素的边界之间以调整空间。

实施例：

padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px;

也可以使用height和width属性来调整元件的尺寸。

例height: 100px;

来源

2017-07-07 14:29:58

好的，我已设法设置边距：-20px; \t margin-left：-20px ;. 但是，当我到侧边栏它仍然覆盖页脚和内容部分是否有任何方式，我可以修复它？ –

是否解决了这个问题？ –

您是否调整了页脚和内容的边距？ –

安排侧栏，导航栏和页脚

回答

相关问题