Question

我在自举容器的右边有一个固定的按钮。

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

注意：必须修复（非绝对），因为我不希望它随窗口滚动。

以下是代码：

   <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;
}

是否可以将其固定在引导容器中？所以它不会移动到容器之外。

在JSFIDDLE查看实时代码。

Answer 1

一种可能性是使用calc

定位固定元素

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

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

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

JSfiddle Demo

如何修复引导容器中的元素？

1 个答案: