Question

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

<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

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

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

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

另一个div

1 个答案: