Bootstrap 另一个 div 内的弹出窗口

Question

我有一个包含两列的 boostrap 行。第一列有一些输入控件。我希望当我单击某些控件时在第二列的右侧显示一个弹出窗口。
理想情况下，箭头位于第一列的末尾，标题位于第二列内。 popover 的宽度必须与第二列相同。

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <input class="form-control text-box single-line myClass" data-toggle="popover" data-trigger="focus" type="text" value="" data-title="Title 1" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. ">
            <input class="form-control text-box single-line myClass" data-toggle="popover" data-trigger="focus" type="text" value="" data-title="Title 2" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. ">
        </div>
    </div>
    <div class="col-md-6">
        I want popover to be displayed inside this. 
    </div>

</div>

<script type="text/javascript">
    $(function () {
        $(".myClass").popover({placement: 'right'});
    });
</script>

Answer 1

为了确保将弹出窗口附加到右列，以便根据它调整大小，我向其添加了 id="right" 并向弹出窗口配置添加了 container : '#right'。
剩下要做的就是添加以下 CSS:

.popover {
    width: 100%;
    max-width: none;
}

看这里：https://jsfiddle.net/b7oqsccr/

Bootstrap 另一个 div 内的弹出窗口

Bootstrap popover inside another div

css

twitter-bootstrap

bootstrap-popover