Django 无空格模板标签会破坏 Bootstrap 呈现的内容

Posted 2023-02-24

【中文标题】Django 无空格模板标签会破坏 Bootstrap 呈现的内容

【英文标题】：Django spaceless template tag breaks Bootstrap rendered content

【发布时间】：2014-03-09 21:55:00

【问题描述】：

Django 模板语言带有一个很好的 % spaceless %...% endspaceless % 标签，它允许删除 html 标签之间的每个空格、制表符、换行符……。

问题在于，Bootstrap 似乎是“spacesensitive”：使用spaceless 时，输入和按钮等表单元素相互“粘”在一起。

这是一个插图：http://jsfiddle.net/KNkqF/ 未呈现为 http://jsfiddle.net/E5rU5/！

你有没有遇到过这个问题，你是否设法在不避免 Django spaceless 的情况下摆脱它？

【参考方案1】：

Bootstrap 将这些输入元素设置为display: inline-block;，而不是浮动或将它们设置为显示为display: block;。您可能希望在输入之间硬编码   以强制使用空格。

---

<span style="display:block; float:left;">hello</span> <span style="display:block; float:left;">world</span>

上面的两个跨度将彼此相邻排列，即使它们之间有一个空格会导致“helloworld”。

---

<span>hello</span> <span>world</span>

上面的两个 span 之间会有一个空格，结果是“hello world”

---

<span>hello</span><span>world</span>

将导致..“helloworld”。

---

我以前从未在表单中使用 spaceless，但因为它正在清理所有空间，所以可以这样做。

您是使用 django-bootstrap-form 还是手写表单？

【讨论】：

非常感谢您的回答。我同时使用 django-crispy-forms 和手写形式。必须插入   对我来说似乎很奇怪在我的代码中（尽管这是我目前使用的解决方案：s）。不会破坏一些响应式功能吗？

是的，它可能会破坏一些未来的东西。我想，我的下一个问题是你为什么在表单上使用 spaceless？您是仅在表单上使用它还是将所有页面内容包含在其中？您可以在页面上使用空格标记两次，以便它排除表单，或者您可以修改引导 css，以便 .form-inline .form-groupclass 有边距。我认为最好的方法是不要在这里使用 spaceless ..

嗯，是的，我将所有基本模板内容包装在一个无空格的标签中，这样可以确保我的 html 始终尽可能小！