另一个 div 内的引导弹出窗口答案

【问题标题】：Bootstrap popover inside another div另一个 div 内的引导弹出窗口
【发布时间】：2016-05-06 10:30:54
【问题描述】：

我有一个包含两列的 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>

【问题讨论】：

标签： css twitter-bootstrap bootstrap-popover

【解决方案1】：

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

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

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

【讨论】：