如何定位 Bootstrap 弹出框？

简介

Bootstrap 是目前使用最广泛的前端框架之一，其中弹出框是其重要的组件之一。在使用弹出框时，有时候需要对其进行定位，下面将介绍如何定位 Bootstrap 弹出框。

定位方式

Bootstrap 弹出框有多种定位方式，包括：相对定位、绝对定位、固定定位、浮动定位。

相对定位

相对定位是弹出框相对于其初始位置进行偏移。使用相对定位时，需给弹出框的父元素设置 position: relative；然后通过 top、bottom、left、right 属性进行偏移操作。

示例代码：

<div style="position: relative;">
  <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="Popover title" data-content="Popover content">Popover on top</button>
</div>

<script>
  $(function () {
    $('[data-toggle="popover"]').popover();
  })
</script>

上面的代码中，div 元素被设置为相对定位。当点击按钮时，弹出框将出现在按钮上方。

绝对定位

绝对定位是弹出框相对于其最近的已定位祖先元素进行定位。使用绝对定位时，需在弹出框的父元素中设置 position: relative；然后通过 top、bottom、left、right 属性进行定位操作。

示例代码：

<div style="position: relative;">
  <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="Popover title" data-content="Popover content">Popover on top</button>
  <div style="position: absolute;top:30px;left:0;">
    <img src="http://via.placeholder.com/100x100">
  </div>
</div>

<script>
  $(function () {
    $('[data-toggle="popover"]').popover();
  })
</script>

上面的代码中，div 元素被设置为相对定位，弹出框的父元素也被设置为相对定位，同时在弹出框内部添加了一个绝对定位的 div 元素，内部显示了一张图片。

固定定位

固定定位是弹出框相对于浏览器窗口进行定位。使用固定定位时，需设置弹出框元素为 position: fixed；然后通过 top、bottom、left、right 属性进行定位操作。

示例代码：

<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="Popover title" data-content="Popover content">Popover on bottom</button>

<script>
  $(function () {
    $('[data-toggle="popover"]').popover({
      container: 'body', // 设置 container 属性为 body，使其在窗口中垂直居中
      viewport: { selector: 'body', padding: 0 } // 设置 viewport 属性为 body，使其不超出窗口
    });
  })
</script>

<style>
  .popover {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

上面的代码中，弹出框被设置为固定定位，然后通过设置 top 为 50%、left 为 50%、transform: translate(-50%, -50%) 使其垂直、水平居中。

浮动定位

浮动定位是弹出框相对于页面流进行浮动定位。使用浮动定位时，需设置弹出框元素为 position: absolute；然后通过 top、bottom、left、right 属性进行定位操作。

示例代码：

<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="Popover title" data-content="Popover content">Popover on right</button>

<script>
  $(function () {
    $('[data-toggle="popover"]').popover({
      container: 'body', // 设置 container 属性为 body，使其在窗口中垂直居中
      viewport: { selector: 'body', padding: 0 } // 设置 viewport 属性为 body，使其不超出窗口
    });
  })
</script>

<style>
  .popover {
    position: absolute;
    top: 30px;
    left: 100%;
  }
</style>

上面的代码中，弹出框被设置为浮动定位，然后通过设置 left 为 100%，top 为 30px 使其浮动在按钮的右边。

总结

上述几种定位方式会让你在使用 Bootstrap 弹出框时游刃有余，灵活定位。但需要注意的是，定位方式的选择要根据具体的场景和需求进行。