Bootstrap Collapse组件span意外换行问题求助

我来帮你搞定这个烦人的换行问题！你遇到的情况大概率是Bootstrap的collapse组件在切换状态时，会给目标元素强制加上display: block样式，导致原本想在行内显示的内容被挤到下一行。哪怕你用了span或者设置了inline，Bootstrap的内置样式还是会覆盖掉你的设置，这就是为什么激活时短暂正确又变回换行的原因。

给你几个具体的解决步骤：

1. 强制覆盖Collapse的默认显示样式 #

Bootstrap在折叠内容展开时，会给元素添加in（Bootstrap 3）或者show（Bootstrap 4+）类，并且设置display: block。我们需要用CSS强制把这个改成inline：

/* 针对Bootstrap 3和4+的展开状态都做覆盖 */
#{{poll}}.collapse.in, #{{poll}}.collapse.show {
    display: inline !important;
}
/* 确保折叠状态下隐藏 */
#{{poll}}.collapse {
    display: none;
}

这里的!important是必须的，因为Bootstrap的样式优先级很高，得强制覆盖它。

2. 调整元素的行内布局结构 #

把按钮和折叠内容放到同一个行内容器里，确保它们始终在同一行。同时检查父元素的样式，比如你的<b class="reducesize">如果默认是块级元素的话，也要改成行内块：

修改后的HTML代码片段：

<div class="row">
  <div class="col-xs-11 col-sm-11" style="float:left">
    {% if poll.description %}
      <div class="Mobilefont Compfont">
        <!-- 把b标签改成行内块，避免它独占一行 -->
        <b class="reducesize" style="display: inline-block;">
          {{ poll.description|striptags|safe|slice:":100" }}
          <!-- 用d-inline包裹按钮和折叠内容，确保它们在行内 -->
          <span class="d-inline">
            <button class="btn btn-link" data-toggle="collapse" data-target="#{{poll}}" style="padding:0; margin:0; display: inline;">
              <small><small><small>More</small></small></small>
            </button>
            <span id="{{poll}}" class="collapse" style="display: none;">
              {{ poll.description|striptags|safe|slice:"100:" }}
            </span>
          </span>
          <small> - {{ poll.date|timesince }} ago</small>
        </b>
      </div><br>
    {% endif %}
  </div>
</div>

3. 检查ID的合法性 #

注意你的data-target=#{{poll}}和id={{poll}}，如果poll对象的字符串里有空格、特殊字符（比如下划线以外的符号），会导致CSS选择器失效。建议用Django的slugify过滤器处理一下：

data-target="#{{poll|slugify}}"
id="{{poll|slugify}}"

这样能确保ID是合法的HTML标识符，避免样式或者JS失效。

按照上面的步骤改完，应该就能解决折叠按钮后换行的问题了！

内容的提问来源于stack exchange，提问作者user3655574