Question

我在项目中使用Bootstrap 4框架，并根据需要使用弹出窗口。在使用弹出窗口时，我注意到当视口从纵向更改为横向时，弹出窗口本身会自动调整位置。

弹出窗口的高度固定，我将数据放置位置设置为底部。从纵向切换到横向时，它是在自动调整位置并更改为最高位置。

我的要求是，在所有屏幕和视口中，我都需要将弹出框的位置设置为底部，并希望防止其自下而上的行为。

当我调查该问题时，发现高度超过了View端口的高度，因此导致了问题。

任何帮助或解决方案将不胜感激。提前致谢。：）

Link : `https://jsbin.com/paladipepi/1/edit?html,css,js,output`

复制步骤：

1）打开链接https://jsbin.com/paladipepi/1/edit?html,css,js,output，在Chrome浏览器中输出输出

2）打开模拟器并选择任何移动设备（iPhone6 / iPhoneX），然后单击弹出窗口。

3）切换到横向模式

预期结果：应放在底部

实际结果：自动调整到最高位置。

代码

$(function () {
  $('[data-toggle="popover"]').popover({
  trigger: 'focus'
})
})

.subheader{
  position:sticky;
}

.popover-body{
  height:340px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  
</head>
<body>
  <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>
  </header>
  <div class="subheader">
    
<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">Active</a>
  <a class="nav-item nav-link" href="#" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">Popver 1</a>
  <a class="nav-item nav-link" href="#" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">Popver 2</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">Popver 3</a>
</nav>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
  

</html>

Answer 1

万岁!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

得到解决方案

在Bootstrap Popover选项中将fallbackPlacement设置为['left'，'right'，'top'，'bottom']

{{1}}

Answer 2

Popover基于popper.js。该位置被定义为“底部”，但是每当您在iphone横向模式下看到它时，由于其高度为340px，该弹出框都没有空间将其显示在底部位置，因此强制其从顶部进行渲染（尽管此行为是正确的）。现在，根据您的要求，您可以尝试使用.popover-body删除iphone景观上media queries的高度或减小其高度，并将height设置为html和body的100%。

希望有帮助！

Answer 3

只需将容器和边界设置为主体，还将所有后备位置设置为底部

$(function () {
  $('[data-toggle="popover"]').popover({
    trigger: 'focus',
    container: 'body',
    boundary: 'body',
    fallbackPlacement: ['bottom','bottom','bottom','bottom']
  })
})

https://jsbin.com/nojavagane/1/edit?html,css,js,output

Answer 4

将fallbackPlacement设置为“逆时针”，并将容器定位为“相对”

$('[data-toggle="popover"]').popover({
        container: '.container',
        html: true,
        trigger:'manual',
        fallbackPlacement: 'counterclockwise'
    })

如何防止或禁用Bootstap 4弹出式自动定位行为（自调整行为）

4 个答案: