如何将侧边栏包装移到水平条下方

时间：2017-09-14 23:58:20

标签： javascript jquery html css

嗨我正在尝试新的html和css你们可以建议我如何在水平导航栏下方移动侧包装，导航栏应该适合页面宽度。在水平导航栏我有文字称为家和注销你们可以移动右端并使其成为主页图标和注销图标

小提琴：https://jsfiddle.net/xzm7bx4n/

＆＃13;
＆＃13; 
$("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("active");
});
＆＃13; 
.row{
    margin-left:0px;
    margin-right:0px;
}

#wrapper {
    padding-left: 70px;
    transition: all .4s ease 0s;
    height: 100%
}

#sidebar-wrapper {
    margin-left: -150px;
    left: 70px;
    width: 200px;	
    background: #222;
    position: fixed;
    height: 60%;
    z-index: 10000;
    transition: all .4s ease 0s;
	float:top;
}

.sidebar-nav {
    display: block;
    float: left;
    width: 200px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#page-content-wrapper {
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    height: auto;
}
#wrapper.active {
    padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
    left: 150px;
}

#page-content-wrapper {
  width: 100%;
}

#sidebar_menu li a, .sidebar-nav li a {
    color: #999;
    display: block;
    float: left;
    text-decoration: none;
    width: 200px;
    background: #252525;
    border-top: 1px solid #373737;
    border-bottom: 1px solid #1A1A1A;
    -webkit-transition: background .5s;
    -moz-transition: background .5s;
    -o-transition: background .5s;
    -ms-transition: background .5s;
    transition: background .5s;
}
.sidebar_name {
    padding-top: 25px;
    color: #fff;
    opacity: .7;
}

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

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

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

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

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

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

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

#main_icon
{
    float:right;
   padding-right: 65px;
   padding-top:20px;
}
.sub_icon
{
    float:right;
   padding-right: 65px;
   padding-top:10px;
}
.content-header {
  height: 65px;
  line-height: 65px;
}

.content-header h1 {
  margin: 0;
  margin-left: 20px;
  line-height: 65px;
  display: inline-block;
}

@media (max-width:767px) {
#wrapper {
    padding-left: 70px;
    transition: all .4s ease 0s;
}
#sidebar-wrapper {
    left: 70px;
}
#wrapper.active {
    padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
    left: 150px;
    width: 150px;
    transition: all .4s ease 0s;
}
}
＆＃13; 
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.css" rel="stylesheet"/>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wrapper" class="active">  
    <!-- Sidebar -->
            <!-- Sidebar -->
    <div id="sidebar-wrapper">       
        <ul class="sidebar-nav" id="sidebar">
          <li><a>New Project</a></li>           
          <li><a>Projects</a></li>
          <li><a>Pyramid Oppurtinities</a></li>
        </ul>
      </div>
          
      <!-- Page content -->
      <div id="page-content-wrapper">
        <!-- Keep all page content within the page-content inset div! -->
        <div class="page-content inset">
            <div class="row">
              <div class="col-md-14">
              <p class="well lead">SANRIA  Home   Logout</p>
			  
			  
              <div class="container">
                <div class="row"> <!-- div da esquerda -->
                    <!-- Text input CNPJ e Razao Social-->

                </div> <!-- fim div da esquerda -->
            </div>
             <!--  <p class="well lead">An Experiment using the sidebar (<a href="http://animeshmanglik.name">animeshmanglik.name</a>)</p>  -->
            </div>
          </div>
        </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我很高兴你问这个问题。当你有一个标题应该是DOM中的第一件事时，你想把它或作为第一个项放在包装器中。侧边栏元件可放置在其下方，以实现时尚外观。 如果你想要一种不同的风格，我们也可以讨论它。 这是我结束的代码。

<div id="wrapper" class="active">  
    <!-- Sidebar -->
            <!-- Sidebar -->

      <!-- Page content -->
      <div id="page-content-wrapper">
        <!-- Keep all page content within the page-content inset div! -->
        <div class="page-content inset">
          <div class="row">
            <div class="col-md-14">
            <p class="well lead">SANRIA  Home   Logout</p>


            <div class="container">
              <div class="row"> <!-- div da esquerda -->
                  <!-- Text input CNPJ e Razao Social-->

              </div> <!-- fim div da esquerda -->
          </div>
             <!--  <p class="well lead">An Experiment using the sidebar (<a href="http://animeshmanglik.name">animeshmanglik.name</a>)</p>  -->
            </div>
          </div>

          <div id="sidebar-wrapper">       
            <ul class="sidebar-nav" id="sidebar">
              <li><a>New Project</a></li>           
              <li><a>Projects</a></li>
              <li><a>Pyramid Oppurtinities</a></li>
            </ul>
          </div>

        </div>
    </div>

这是CSS。

.row{
    margin-left:0px;
    margin-right:0px;
}

#wrapper {
    /*padding-left: 70px;*/
    transition: all .4s ease 0s;
    height: 100%
}

#sidebar-wrapper {
    margin-left: -150px;
    left: 70px;
    width: 200px;   
    background: #222;
    position: fixed;
    height: 60%;
    z-index: 10000;
    transition: all .4s ease 0s;
     /*float:top;*/
}

.sidebar-nav {
    display: block;
    float: left;
    width: 200px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#page-content-wrapper {
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    height: auto;
}
#wrapper.active {
    /*padding-left: 150px;*/
}
#wrapper.active #sidebar-wrapper {
    left: 150px;
}

#page-content-wrapper {
  width: 100%;
}

#sidebar_menu li a, .sidebar-nav li a {
    color: #999;
    display: block;
    float: left;
    text-decoration: none;
    width: 200px;
    background: #252525;
    border-top: 1px solid #373737;
    border-bottom: 1px solid #1A1A1A;
    -webkit-transition: background .5s;
    -moz-transition: background .5s;
    -o-transition: background .5s;
    -ms-transition: background .5s;
    transition: background .5s;
}
.sidebar_name {
    padding-top: 25px;
    color: #fff;
    opacity: .7;
}

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

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

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

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

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

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

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

#main_icon
{
    float:right;
   padding-right: 65px;
   padding-top:20px;
}
.sub_icon
{
    float:right;
   padding-right: 65px;
   padding-top:10px;
}
.content-header {
  height: 65px;
  line-height: 65px;
}

.content-header h1 {
  margin: 0;
  margin-left: 20px;
  line-height: 65px;
  display: inline-block;
}

@media (max-width:767px) {
#wrapper {
    /*padding-left: 70px;*/
    transition: all .4s ease 0s;
}
#sidebar-wrapper {
    left: 70px;
}
#wrapper.active {
    /*padding-left: 150px;*/
}
#wrapper.active #sidebar-wrapper {
    left: 150px;
    width: 150px;
    transition: all .4s ease 0s;
}
}

.well{
  margin-bottom: 0px;
}
.lead{
  margin-bottom: 0px;
}
p{
  margin: 0px;
}

使用JSFiddle：https://jsfiddle.net/eq6bhyg5/

注意：我取出了所有不必要的填充，似乎抛弃了视图。 我们真的应该使用我们给予的空间。 如果您希望侧边栏位于侧边，页面旁边包含标题，则相邻。 操作：将侧边栏从页面内容包装器中取出。 将display:inline-block; width:20%添加到side-bar css。然后将包装器css设置为width: 80%; display: inline-block;

相关问题
最新问题