堆棧內存溢出
  簡體   English   中英

內容顯示在bootstrap sidenav之上和之下

[英]Content displaying on top of and below bootstrap sidenav

 原文  2016-07-06 06:33:03  4   1    html/ css/ twitter-bootstrap/ menu

問題描述

我把一個sidenav手風琴放在一起。 問題在於，當側面滾動時，內容會在sidenav之上和之下。 如果可能的話，我希望把內容“推”到一邊可以說，但仍然可以讓它始終可見。

我已嘗試在頁面上使用溢出和顯示屬性以及sidenav，但這些屬性似乎或多或少地改變了內容相對於sidenav開始的位置，但同樣的問題仍然存在。 我也試圖弄亂邊距和填充，但這也沒有用。 任何人都知道可能會發生什么，或者這是否可能？

我已經附上了一個探索者 ，我試圖盡可能地刪除代碼，同時仍然能夠顯示出問題所在。 您可能需要讓視圖屏幕更大才能看到它（我需要解決的另一個錯誤，但還沒有真正研究過它）。

這是我的標記 

<!DOCTYPE html>
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <nav class="navbar navbar-s1 navbar-side left" role="navigation">

    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul id="side" class="nav navbar-nav side-nav">

        <li><a href=""><i class="fa fa-dashboard"></i> Forms</a></li>

        <li class="panel">
          <a class="accordion-toggle" data-target="#customerSupport" data-toggle="collapse" data-parent="#side"> Customer Support <i class="fa fa-caret-down"></i></a>
          <ul id="customerSupport" class="collapse nav">
            <li>
              <a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Reconciliation</a>
            </li>
            <!-----<li class="panel">
                        <a class="accordion-toggle" data-target="#affliate" data-toggle="collapse">Affliate <i class="fa fa-caret-down"></i></a>
                        <ul id="affliate" class="collapse nav">
                            <li><a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Categories</a></li>
                            <li><a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Products</a></li>
                        </ul>
                    </li>-->
          </ul>
        </li>

        <li class="panel">
          <a class="accordion-toggle" data-target="#iceTravel" data-toggle="collapse" data-parent="#side"> Menu <i class="fa fa-caret-down"></i></a>
          <ul id="iceTravel" class="collapse nav">
            <li>
              <a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Reconciliation</a>
            </li>
            <li>
              <a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Spiff Tracker</a>
            </li>
          </ul>
        </li>

        <li class="panel">
          <a class="accordion-toggle" data-target="#lifestyles" data-toggle="collapse" data-parent="#side"> Menu <i class="fa fa-caret-down"></i></a>
          <ul id="lifestyles" class="collapse nav">
            <li>
              <a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Reconciliation</a>
            </li>
          </ul>
        </li>

        <li class="panel">
          <a class="accordion-toggle" data-target="#marriot" data-toggle="collapse" data-parent="#side"> Menu <i class="fa fa-caret-down"></i></a>
          <ul id="marriot" class="collapse nav">
            <li>
              <a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Reconciliation</a>
            </li>
          </ul>
        </li>

        <li class="panel">
          <a class="accordion-toggle" data-target="#rciTravel" data-toggle="collapse" data-parent="#side"> Menu <i class="fa fa-caret-down"></i></a>
          <ul id="rciTravel" class="collapse nav">
            <li>
              <a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Adjustment</a>
            </li>
            <li>
              <a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Cancellation</a>
            </li>
            <li>
              <a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Manual Push</a>
            </li>
            <li>
              <a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Reconciliation</a>
            </li>
            <li class="divider"></li>
            <li>
              <a class="sublink" href=""> <i class="fa fa-angle-double-right"></i> Escalations</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
  <div class="row">
    <div class="col-lg-4" id="memberInfo">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">Member Information</h3>
        </div>
        <div class="panel-body">
          <div class="input-group">
            <input type="text" class="form-control input-sm" placeholder="Member ID" />
            <span class="input-group-btn" style="width:0px;"></span>
            <input type="text" class="form-control input-sm" placeholder="Brand ID" />
          </div>
          <div class="input-group">
            <input type="text" class="form-control input-sm" placeholder="Member's First Name" />
            <span class="input-group-btn" style="width:0px;"></span>
            <input type="text" class="form-control input-sm" placeholder="Member's Last Name" />
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="reservationInfo">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Reservation Information</h3>
      </div>
      <div class="panel-body">
        <div class="container">
          <form class="col-sm-6" role="form">

            <div id="paymentInfo" class="col-sm-12">
              <div class="panel panel-primary">
                <div class="panel-heading">
                  <h3 class="panel-title">Payment Information</h3>
                </div>
                <div class="panel-body">
                  <div class="container">
                    <form role="form">

                      <div class="form-inline" style="margin-left: 114px">
                        <div class="form-group-sm">
                          <div class="btn-group-sm form-inline">

                            <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
                            <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <div class="input-group-sm">
              <div class="form-group-sm">
                <label for="comment" style="width: auto">Reservation Names:</label>
                <textarea class="form-control" rows="2" id="comment"></textarea>
              </div>
              <div class="form-group">
                <label for="comment" style="width: auto">Witness Recording ID:</label>
                <textarea class="form-control" rows="2" id="comment"></textarea>
              </div>
              <div class="form-group">
                <label for="comment" style="width: auto">Booking Description/Notes:</label>
                <textarea class="form-control" rows="2" id="comment"></textarea>
              </div>
            </div>

        </div>
      </div>
    </div>
    <legend>Legend</legend>
    <div class="form-group">
      <button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
    </div>


</body>

</html>

還有我的CSS 

body {
    padding-top: 50px;
    padding-bottom: 20px;
    margin: 0px;
    padding-left: 200px;

}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}




/*----------SideNav------------*/
.circle-tile {
    margin-bottom: 15px;
    text-align: center;
}
.circle-tile-heading {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 100%;
    color: #FFFFFF;
    height: 80px;
    margin: 0 auto -40px;
    position: relative;
    transition: all 0.3s ease-in-out 0s;
    width: 80px;
}
.circle-tile-heading .fa {
    line-height: 80px;
}
.circle-tile-content {
    padding-top: 50px;
}
.circle-tile-number {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 0 15px;
}
.circle-tile-description {
    text-transform: uppercase;
}
.circle-tile-footer {
    background-color: rgba(0, 0, 0, 0.1);
    color: rgba(255, 255, 255, 0.5);
    display: block;
    padding: 5px;
    transition: all 0.3s ease-in-out 0s;
}
.circle-tile-footer:hover {
    background-color: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}
.circle-tile-heading.dark-blue:hover {
    background-color: #2E4154;
}
.circle-tile-heading.green:hover {
    background-color: #138F77;
}
.circle-tile-heading.orange:hover {
    background-color: #DA8C10;
}
.circle-tile-heading.blue:hover {
    background-color: #2473A6;
}
.circle-tile-heading.red:hover {
    background-color: #CF4435;
}
.circle-tile-heading.purple:hover {
    background-color: #7F3D9B;
}
.tile-img {
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.9);
}

/* Edit Below to Customize Widths > 768px */
@media (min-width:768px) {

.side-nav {
  margin-left: -225px;
  left: 225px;
  width: 225px;
  position: fixed;
  top: 50px;
  height: 100%;
  border-radius: 0;
  border: none;
}

.side-nav >li .dropdown > ul .dropdown-menu {
  min-width: 225px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.side-nav>li>a {
  width: 225px;
}



.navbar-collapse {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

}

/* New */

.navbar-side .side-nav .panel {
 margin: 0px;
 padding: 0px;
}

.navbar-side ul.side-nav {
  background-color: #2C3E50;
  border-bottom: 1px solid #54677A;
  font-size: 13px;
  margin-bottom: 0;
  margin-top: 0;
  border-left: 1px solid #54677A;
}

.navbar-side .navbar-nav > li > a:hover {    /*-----------------------*/
  background-color: #2980B9 !important;
}

.navbar-side .navbar-nav > li > a:focus {   /*-----------------------*/
  background-color: #34495E !important;
}

.navbar-side .navbar-nav > li > a:active {
 background-color: darkblue !important;    /*-----------------------*/
 color: #000;
 outline: medium none;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1)
}

.navbar-side .navbar-nav > li > a {
 background-color: darkcyan;
 outline: medium none;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); /*-----------------------*/
}

.navbar-side .navbar-nav .sublink {
  color: #000 ;
}

.navbar-side .side-nav li, .navbar-side .side-nav li.panel {
 border-bottom: 1px solid #142638;
 border-top: 1px solid #54677A;
 border-left: 1px solid #54677A;
 border-right: 1px solid #54677A;
}
.navbar-side .side-nav li.panel ul li {
 border-bottom: medium none;
 border-top: medium none;
}

/* Top Menu Color */


.navbar-s1 .navbar-text {
  color: #999999;
}

.navbar-s1 .navbar-nav > li > a {
  color: #999999;
}

.navbar-s1 .navbar-nav > li > a:hover,
.navbar-s1 .navbar-nav > li > a:focus {
  color: #ffffff;
  background-color: transparent;
}

.navbar-s1 .navbar-nav > .active > a,
.navbar-s1 .navbar-nav > .active > a:hover,
.navbar-s1 .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #080808;
}

.navbar-s1 .navbar-nav > .disabled > a,
.navbar-s1 .navbar-nav > .disabled > a:hover,
.navbar-s1 .navbar-nav > .disabled > a:focus {
  color: #444444;
  background-color: transparent;
}

.navbar-s1 .navbar-toggle {
  border-color: #333333;
}

.navbar-s1 .navbar-toggle:hover,
.navbar-s1 .navbar-toggle:focus {
  background-color: #333333;
}

.navbar-s1 .navbar-toggle .icon-bar {
  background-color: #ffffff;
}

.navbar-s1 .navbar-collapse,
.navbar-s1 .navbar-form {
  border-color: #101010;
}

.navbar-s1 .navbar-nav > .open > a,
.navbar-s1 .navbar-nav > .open > a:hover,
.navbar-s1 .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: #080808;
}

@media (max-width: 767px) {
  .navbar-s1 .navbar-nav .open .dropdown-menu > .dropdown-header {
    border-color: #080808;
  }
  .navbar-s1 .navbar-nav .open .dropdown-menu .divider {
    background-color: #080808;
  }
  .navbar-s1 .navbar-nav .open .dropdown-menu > li > a {
    color: #999999;
  }
  .navbar-s1 .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-s1 .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
    background-color: transparent;
  }
  .navbar-s1 .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-s1 .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-s1 .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #080808;
  }
  .navbar-s1 .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-s1 .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-s1 .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #444444;
    background-color: transparent;
  }
}

.navbar-s1 .navbar-link {
  color: #999999;
}

.navbar-s1 .navbar-link:hover {
  color: #ffffff;
}


.divider {
  height: 1px;
  width:100%;
  display:block; /* for use on default inline elements like span */
  margin: 0px 0;
  background-color: #e5e5e5;}



/*--------Custom Classes----------*/
#memberInfo {
    padding-top: 20px;
}

.calBoxes input[type=text] {
  display: inline-block;
  vertical-align: middle;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}

我沒有我的基地關閉sidenav的這個 ，我發現也是如此。 如果您需要任何澄清或其他信息，請告訴我們！ 謝謝！

編輯

根據建議我添加了col-sm-x屬性，但現在導航欄顯示在頁面頂部和下面的內容，我想要它們並排。 我還對我的CSS進行了更改以適應，如下所示。 

.side-nav {
  margin-left: -25px;
  left: 225px;
  width: 225px;
  position: static;
  top: 50px;
  height: 100%;
  border-radius: 0;
  border: none;
  overflow: auto;
}

當導航欄離開頁面時，我更改了左邊距和溢出屬性。 我也更新了plunker。

1 個解決方案

解決方案1
 0  2016-07-06 10:19:43

首先將頁面包裝在container-fluid以便為行提供正確的對齊和填充。 然后將sidenav和content包裝成row ，並使用Bootstrap的網格列系統12，為各個元素分配列數。 例如，側欄的col-md-2和內容的col-md-10 。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 固定導航欄下方的內容（引導程序） Twitter Bootstrap-Div內容浮動在下面的div上方 Bootstrap sidenav 選項卡內容導航無法正常工作 鏈接下方顯示的內容 引導折疊顯示在下方 在固定標題下顯示內容 Bootstrap模式不顯示內容 在屏幕頂部下方顯示列表項目標 Bootstrap下拉菜單內容包含在以下內容中： navbar-fixed-top Bootstrap下方的空間
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM