通過引導導航欄折疊保持邊欄格式

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

您在引導CSS中有以下內容：

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

只需將float添加到.nav> li：

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

Answer 2

從.nav> li更改類

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

至

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