Question

HTML：

<a href="#" data-container="body" data-id="54" data-toggle="popover" data-placement="left">

左边是Popover

使用Javascript：

$('*[data-id]').mouseenter(function(event) {
        var e=$(this);
        var content = '<div class="row"><div class="col-xs-12"><div class="col-xs-8">
Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1</div><div class="col-xs-4">Element 2</div></div>';






    e.popover({html:true,placement:'bottom', animation: false, 
        delay:   { show: 1500, hide: 100 }, content: content}).popover('show')

});

它工作正常，但仅当内容中的字符串包含空格时。如果没有空格文本与第二个div重叠。

JS小提琴： http://jsfiddle.net/9Nt48/

我如何解决这个问题？

Answer 1

这是因为你的标记错了。 Bootstrap中的row可以嵌套您的列。您在其他列中嵌套了列，这是不正确的。

<div class="row">
  <div class="col-xs-12">
   Element1Element1 Element1Element1Element1Element1Element1Element1        Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1
  </div>
</div>

如果您想在工具提示中使用列，则还需要使用row和col-x-x类。因此，如果要显示简单文本，则不必使用它们。

最后，如果您想要多行文本，只需要一个p元素来分割文本。

警告：我实际上并不确定你可以在工具提示中使用网格。所以你可能最好不要使用没有列的简单文本......

Answer 2

这是连续文本的问题，如果它似乎与其他div重叠，CSS会自动将它放在下一行，但是当你不这样做时它没有多少选择给出一个空格，这是因为它不知道什么时候打破，所以你可以指定它：

.popover-content {
    word-wrap:break-word;
}

由于您的列已经指定了宽度，如果div中的文本超出它，请在此时将其分解。

<强> DEMO

div中的Bootstrap popover文本重叠，没有空格

2 个答案: