使用Django模板代码和Bootstrap 4徽章的不间断空间

Question

我试图保留使用Django模板语言生成的文本，该语言包含在Bootstrap 4徽章中，以及徽章中未包含的一些其他文本。

这是我的代码：

<span>Submitted&nbsp;by:&nbsp;<span class="badge badge-primary">{{ 
user.username }}</span></span>

我希望短语“由USER提交”中的所有单词始终位于同一行，但上面的代码并未实现。知道什么是错的吗？

Answer 1

将类text-nowrap添加到外部<span>元素并删除不必要的 。

引导4中的text-nowrap可以防止包装，顾名思义。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-4 bg-success">
            <span class="text-nowrap">Submitted by: <span class="badge badge-primary">Usernameverylongusernameevenlongerthanthat</span></span>
        </div>
    </div>
</div>