Question

我想使用Bootstrap的弹出功能，使窗口在侧边栏中打开，而不是与触发按钮/文本相邻，但我无法弄清楚它是如何工作的。我尝试给侧边栏一个id，包括属性data-viewport =＆＃34;＃sidebar＆＃34;但这似乎不起作用我是一位老师，试图为我的班级做一些事情，而不是程序员或任何事情，所以任何帮助都会受到高度赞赏。
这是我正在寻找的模型：http://i.imgur.com/IYPFlOC.jpg

以下是我所拥有的：

  <div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div id="sidebar">
                Sidebar where the popup window should appear.
            </div>
        </div>

        <div class="col-sm-8">

            <p>This is the main content where the <span class="pop"
            data-content="Popover Content" data-html="true" data-toggle=
            "popover" data-trigger="hover" tabindex="0" title=
            "Title">trigger text</span> would be.</p>
        </div>
    </div>
</div>

Answer 1

这是我认为你想要完成的一个粗略的例子。

JSFiddle：Example Code

<div class="container">
<div class="row">
    <div class="col-sm-4">
        <div id="sidebar">
            Sidebar where the popup window should appear.

            <span data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Sidebar where the popup window should appear.</span>
        </div>
    </div>

    <div class="col-sm-8">
This is the main content where the
        <a id="btn">trigger text</a>
        would be.
    </div>
</div>

$(function () {
    $("#btn").on("click", function(){
        $('[data-toggle="popover"]').popover("toggle")
    });
});

边栏中的Bootstrap Popover

1 个答案: