Question

我正试图在Bootstrap中创建一个类似于Facebook的侧边栏。我尝试使用“词缀”，但侧边栏的内容只是向左移动，与主要内容重叠。我尝试添加“right：0;”，但随后它会溢出网格系统。

到目前为止，我的代码是非常基本的，因为开发依赖于这个固定的右侧边栏功能，但这里是：

<div class="container">
    <div class="row">
        <div class="col-md-9">
            A bunch of Lorem Ipsum text.
        </div>
        <div class="col-md-3 affix">
            <h1>Sticky sidebar</h1>
        </div>
    </div>
</div>

有没有人对如何使这项工作有任何建议？

谢谢！

Answer 1

body {
  background: pink;
}

.sticky {
  background: white;
  position: fixed;
  top: 0;
  right: 0;
}

<body>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
</body>

<div class="sticky">
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
</div>

你想要这样的东西吗？

你使用css positon:fixed;和top:0;right:0;将div放在右上角

粘贴右侧边栏与Bootstrap

1 个答案: