使用 Bootstrap3 固定侧边栏设置宽度答案

【问题标题】：Fixed sidebar with set width using Bootstrap3使用 Bootstrap3 固定侧边栏设置宽度
【发布时间】：2015-08-13 03:21:55
【问题描述】：

我正在尝试设置带有可滚动内容的固定不可滚动侧边栏。它类似于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/

谢谢

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

这是一种解决方案，无需引导类即可满足您的需求（但您需要某种 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。

【讨论】：

感谢您的解决方案，唯一的问题是我会失去 Bootstrap resonsivenes...
你想要一个固定的宽度，而我使用了一个固定的宽度。如果您希望它具有响应性，您应该使用媒体查询。
引导的重点是响应。您可以在我链接到的示例中看到主内容窗口是如何滚动和响应的
如果您对其进行测试，我的代码与链接的示例具有相同的品质。