select2下拉列表中的项目未填充宽度

Question

在我的 select2 代码中，我使用 templateResult 将文本包装在 <span class="full-width">text</span> 中。我还附加了一个 Bootstrap 弹出窗口。 full-width 是具有 width: 100%' 的类。但是，它并没有占据下拉列表的整个宽度，这一事实证明，弹出框仅在光标位于实际文本上时发生，而不是文本右侧的空白处。当我查看检查器时，包含它的 <li class="select2-results__open"... 是 166x32（周围有 6px 填充），但实际的 <span class="full-width">text<span> 只有 56x16，没有填充、边距或边框。我怎样才能让它占据整个宽度？

根据要求，这里是 templateResult 函数（在 CoffeeScript 中，因为这就是这个项目的内容）

                templateResult: (data) ->
                    # Get the select data
                    text = data.display_name || data.name || data.text
                    ret = $(
                            "<span class=\"full-width\"
                            >#{text}</span>"
                        )
                    if data.description
                        ret.popover({
                            trigger: 'hover',
                            container: 'body',
                            html: true,
                            content: data.description,
                            title: data.title || '',
                            placement: data.placement || 'auto right',
                        })
                    ret

还有 CSS

.full-width: {
  width: 100%;
}

还有一个小提琴：https://jsfiddle.net/ptomblin/3zap0sh9/

Answer 1

我在 .full-width css 中添加了display: block;，问题就消失了。