Question

我设法维持一种格式，就像全屏时一样。但是，当屏幕变小，边栏折叠，并且汉堡包按钮可以访问时，当我单击按钮显示侧边栏时格式完全改变。如何维护侧边栏的格式？这是html：

<div class="container">
<div class="row">
    <!--Collapsable navbar-->
    <div class="sidebar-nav">
      <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header" >
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <span class="visible-xs navbar-brand">Logo</span>
        </div>

        <div class="navbar-collapse collapse sidebar-navbar-collapse">
          <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-menu-left leftarrow" aria-hidden="true"></span>
          </button>
          <ul class="nav navbar-nav mylist" style="align-items:center">
            <!-- logo-->
            <img src="https://s3.amazonaws.com/crowdhoster/uploads/settings/logo_images/000/000/001/original.png?1410418498" width="80" height="30" margin-left="90">
            <br>
            <br>
            <!--User icon to add in profile picture-->
            <div class="row" style="align-items:center">
                <div class="img-circle usericon" >
                  <img src="http://i.stack.imgur.com/dolAE.png" class="img-circle img-responsive usericon tint">
                  <div class="caption">
                    <label for='picture'>
                      <img src="http://i.stack.imgur.com/XMojX.png" style="cursor:pointer">
                    </label>
                    <form action="demo_form.asp" style='display: none;'>
                      <input type="file" name="pic" accept=".gif,.jpg,.png,.tif|image/*" id='picture'>
                      <input type="submit">
                    </form>
                  </div>
                </div>
            </div>
            <br>
            <br>
            <p style="font-size:22px; line-height: 8px">userN</p>
            <p style="font-size:14px">emailAddress</p>

            <!-- Navbar menu -->
            <li><a style="cursor:pointer" go-click="/dashboard">Dashboard</a></li>
            <li><a style="cursor:pointer" go-click="/keyholder">People</a></li>
            <li><a style="cursor:pointer" go-click="/devices">Devices</a></li>
            <li><a style="cursor:pointer" go-click="/about">About</a></li>
            <li><a style="cursor:pointer" go-click="/notifications">Notifications</a></li>
            <li><a style="cursor:pointer" go-click="/analytics">Analytics</a></li>
          </ul>
          <a class="nav navbar-nav logout" style="cursor:pointer; align-items:center" go-click="/signout">Log Out</a>
        </div><!--/.nav-collapse -->
      </div>
    </div>

  <div class="col-sm-9">

  </div>
</div>
</div>

非常感谢提前。如果您需要任何css，请告诉我，因为该代码块中有一些类适用于格式化。

的CSS：

@media (min-width: 768px) {
  .sidebar-nav .navbar .navbar-collapse {
    padding-top: 24px;
    background-color: #FFFFFF;
    border-radius: 16px !important;
    max-height: none;
    position: absolute;
    border-width: thin;
    border-style: solid;
    border-color: #f44336 !important;
  }
  .sidebar-nav .navbar ul {
    width: 235px;
    height: 676px;
    color: #f44336;
    background-color: #FFFFFF;
    font-family: 'Roboto';
    font-size: 16px;
    text-align: center;
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li a {
    padding-top: 12px;
    color: #f44336;
    background-color: #FFFFFF;
    font-family: 'Roboto';
    text-align: center;
    font-size: 16px;
    padding-bottom: 12px;
  }

Answer 1

你的bootstrap css中有这个：

@media (min-width: 768px){ 
  .navbar-nav>li {
        float: left;
    }
}

只需向你的.nav＆gt;添加浮动。利：

.nav>li {
    position: relative;
    display: block;
    float: left;
}

Answer 2

班级变更.nav＆gt;来自

.nav > li {
    position: relative;
    display: block;
}

到

.nav > li {
        position: relative;
        display: inline-block;
    }

使用bootstrap navbar collapse维护侧边栏格式

2 个答案: