Создание фиксированной боковой панели рядом с центрированной сеткой Bootstrap 3

Я хотел бы создать фиксированную боковую панель, которая существует за пределами мой центрированной сетке Bootstrap. Проблема, с которой я сталкиваюсь при попытке сделать это, заключается в определении того, какие дополнительные стили применять/перезаписывать к моему .container чтобы он не перекрывал мою боковую панель при изменении размера экрана.

для начала я использую только часть сетки CSS framework, поэтому .container,.row и .col-md-12 код вытащил из bootstrap.css сам файл и не является пользовательским. Также имейте в ум я использую Bootstrap 3, поэтому, пожалуйста, никаких предложений для решения fluid grid для Bootstrap 2, о котором часто спрашивают в предыдущих потоках.

HTML

<div id="left-nav"></div>
<div class="container">
   <div class="row">
      <div class="col-md-12">
         <p>Lorem ipsum dolor sit amet, nunc dictum at.</p>
      </div>
   </div>
</div>

CSS

html, body {
  height: 100%;
  width: 100%;
}
#left-nav {
  background: #2b2b2b;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 250px;
}
1 66
html css twitter-bootstrap responsive-design

1 ответ:

как сказал drew_w вы можете найти хороший пример здесь.

HTML

<div id="wrapper">
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand"><a href="#">Home</a></li>
            <li><a href="#">Another link</a></li>
            <li><a href="#">Next link</a></li>
            <li><a href="#">Last link</a></li>
        </ul>
    </div>
    <div id="page-content-wrapper">
        <div class="page-content">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <!-- content of page -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#wrapper {
  padding-left: 250px;
  transition: all 0.4s ease 0s;
}

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

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

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

@media (max-width:767px) {

    #wrapper {
      padding-left: 0;
    }

    #sidebar-wrapper {
      left: 0;
    }

    #wrapper.active {
      position: relative;
      left: 250px;
    }

    #wrapper.active #sidebar-wrapper {
      left: 250px;
      width: 250px;
      transition: all 0.4s ease 0s;
    }

}

JSFIDDLE

107