Question

我正在尝试设置一个带有可滚动内容的固定不可滚动侧边栏。它与Make column fixed position in bootstrap类似，但在该示例中，侧边栏具有可变宽度。

我试过了：

.fixed {
    position: fixed;
    width: 290px;
}

.scrollit {
    float: left;
}

<div class="row">
    <div class="col-md-3 fixed">
        Fixed content
    </div>
    <div class="col-md-9 scrollit">
        scrollable

    </div>
</div>

但它只是将2列彼此分层。

我正在尝试复制的网站示例位于http://demo.elated-themes.com/borderland9/contact/

由于

Answer 1

这是一个解决方案，你需要什么，而不需要bootstrap类（但你需要某种normalize.css）。

body {
  padding: 0;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  background: red;
  width: 290px;
}
.scrollit {
  background: #000;
  color: white;
  padding-left: 300px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="scrollit">
  <p class="">Nulla placerat ipsum at velit eleifend, et tristique est ultricies. Sed molestie cursus feugiat. Praesent pulvinar gravida metus mattis viverra. Cras congue convallis pharetra. In hac habitasse platea dictumst. Praesent auctor cursus dolor, a feugiat
    ex convallis vitae. Nulla facilisi. Suspendisse potenti. Aliquam nec purus eu turpis sagittis aliquam. Donec auctor eget urna sit amet eleifend.</p>
  <p class="">Nulla placerat ipsum at velit eleifend, et tristique est ultricies. Sed molestie cursus feugiat. Praesent pulvinar gravida metus mattis viverra. Cras congue convallis pharetra. In hac habitasse platea dictumst. Praesent auctor cursus dolor, a feugiat
    ex convallis vitae. Nulla facilisi. Suspendisse potenti. Aliquam nec purus eu turpis sagittis aliquam. Donec auctor eget urna sit amet eleifend.</p>
  <p class="">Nulla placerat ipsum at velit eleifend, et tristique est ultricies. Sed molestie cursus feugiat. Praesent pulvinar gravida metus mattis viverra. Cras congue convallis pharetra. In hac habitasse platea dictumst. Praesent auctor cursus dolor, a feugiat
    ex convallis vitae. Nulla facilisi. Suspendisse potenti. Aliquam nec purus eu turpis sagittis aliquam. Donec auctor eget urna sit amet eleifend.</p>
  <p class="">Nulla placerat ipsum at velit eleifend, et tristique est ultricies. Sed molestie cursus feugiat. Praesent pulvinar gravida metus mattis viverra. Cras congue convallis pharetra. In hac habitasse platea dictumst. Praesent auctor cursus dolor, a feugiat
    ex convallis vitae. Nulla facilisi. Suspendisse potenti. Aliquam nec purus eu turpis sagittis aliquam. Donec auctor eget urna sit amet eleifend.</p>
</div>
<div class="fixed">Fixed content</div>

这是fiddle

希望它有所帮助。如果是，请+1。

使用Bootstrap3修复了设置宽度的侧边栏

1 个答案: