css - 如何修复 Bootstrap 容器中的元素？

Question

我在 Bootstrap 容器的右侧固定了一个按钮。

但是在高分辨率下，按钮移动到 Bootstrap 容器之外，因为它相对于主体而不是容器是固定的。

注意:它必须是固定的(不是绝对的)，因为我不希望它随窗口滚动。

代码如下:

   <div class="body">
    <h1>Body</h1>
      <div class="container">
      <h1>Container</h1>
        <a href="#" class="fixed-btn">Enquire Now</a>
      </div>
    </div>

CSS:

.fixed-btn {
  padding: 10px 20px;
  background: #000;
  color: #FFF !important;
  text-decoration: none !important;
  line-height: 30px;
  position: fixed;
  right: 70px;
  top: 50px;
}

.body {
  background: aquamarine;
  min-height: 1000px;
}

.container {
  background: antiquewhite;
  min-height: 1000px;
  max-width: 400px;
}

是否可以将其固定在 Bootstrap 容器中？所以它不会移出容器。

在 JSFIDDLE 查看实时代码.

Answer 1

一种可能是使用 calc 定位固定元素

.fixed-btn {
  position: fixed;
  left: calc(50% + (400px/2)) ;
}

在这种情况下，400px(来自您的演示)将是基于 Bootstrap 中各种宽度的容器宽度。

您必须在每个媒体查询中调整它。

JSfiddle Demo