Popover 没有显示正确的对齐 Bootstrap答案

【问题标题】：Popover does not displaying proper align BootstrapPopover 没有显示正确的对齐 Bootstrap
【发布时间】：2017-12-14 07:07:44
【问题描述】：

我正在做一个项目，我想在弹出窗口中显示一些值。但是当我尝试了很多事情时，它没有正确显示。看看我的代码。我将一些 div 包装在一个标签中，以便在其上制作一个弹出框。它不能正常工作。

如果我将它包装在 div 中，则弹出框不会显示。让我知道我的代码有什么问题或给我一些建议。

https://codepen.io/awesome_designer/pen/EoazJv

<main class="set-callback-main-wrap">
     <div class="row">
        <div class="col-xs-12">
          <div class="callback-table-main-wrap">
            <div class="call-back-time-header clearfix">
              <div class="call-back-time-value blank-slot">
                <span></span>
              </div>
              <div class="call-back-time-value first-slot">
                <span>12am</span>
              </div>



            </div>
            <div class="clearfix table-date-value">
              <div class="call-back-date">
                <span>Dec 1</span>
              </div>
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner cyan"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
              <!-- <div class="call-set-slot"> -->
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
                <div class="call-set-slot-inner"></div>
              <!-- </div> -->
            </div>


          </div>

        </div>
      </div>
    </main>

【问题讨论】：

标签： javascript twitter-bootstrap-3 bootstrap-popover

【解决方案1】：

默认情况下，弹出框会出现在元素的右侧。

将属性data-toggle="popover"调整为每个块<div>（元素）

<div class="call-set-slot-inner pink" data-toggle="popover" data-trigger="focus" data-container="body" data-placement="right" data-html="true" id="login"></div>

与data-trigger="focus"

data-trigger="focus" 属性，当点击元素外部时会关闭弹出框：

编辑你的 javascript

$("[data-toggle=popover]").click(function(){
    $(this).popover({
        html: true,
        content: function() {
        var id = $(this).attr('id');
        return $('#popover-content-' + id).html();
      }
    });
});

【讨论】：

感谢您的解决方案，但它看起来不像我想要的。因为如果我把 data-toggle="popover" data-trigger="focus" data-container="body" data-placement="right" data-html="true" id="login" 然后每个 div 都有一个弹出框但我希望所有 div 都有一个弹出窗口。
我不知道该怎么做，因为 Bootstrap Popover 将绝对定位应用于弹出框，以便将弹出框定位在触发元素附近。

【解决方案2】：

我找到了答案。

我将 div 包装在单个 div 中，并为该 div 提供一个弹出框并添加一些样式。代码如下。

<div data-toggle="popover" data-container="body" data-triger="focus" data-placement="top" data-html="true" id="login" style="width: 240px;height: 50px;float: left;">
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                <!-- </div> -->
                <!-- <div class="call-set-slot"> -->
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                <!-- </div> -->
                <!-- <div class="call-set-slot"> -->
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                  <div id="popover-content-login" class="hide">
                    <ul class="list-group">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                  </div>
                </div>

【讨论】：