如何修复 bootstrap 容器中的元素？

Question

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

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

注意：它必须是固定的（不是绝对的）因为我不希望它随着window滚动。

代码如下：

   <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

如何修复 bootstrap 容器中的元素？

How to fix an element within a bootstrap container?

css

position

twitter-bootstrap