如何在popover bootstrap中水平对齐html div元素?

时间:2016-04-21 19:26:18

标签: twitter-bootstrap css3 twitter-bootstrap-3

我正在使用bootstrap 3.我想在popover中水平对齐两个div元素,但我不知道应用样式设置属性display: inline-block;的确切类。知道我怎么能实现这个目标?

我尝试用另一个div包装它们并将此属性设置为inline-block到父div但是没有用。

$('#tag-input').popover({
            container: 'body',
            trigger: "manual",
            html: "true",
            animation: true,
            content: "<div>First row</div><div>Second row</div>"
        });

Illustration of element alignment

1 个答案:

答案 0 :(得分:2)

只需将两个div包含在一个带有class="row"的div中。然后你可以为它们中的每一个添加class="col-xs-6",这样它们每个占据了popover的50%宽度。

Demo Here

$('#tag-input').popover({
    container: 'body',
    trigger: "hover",
    position: "bottom",
    html: "true",
    animation: true,
    content: "<div class='row'><div class='col-xs-6'>First row</div><div class='col-xs-6'>Second row</div></div>"
});