twitter-bootstrap 在 Bootstrap 3.0 中添加单词之间的空格（HTML 转义字符不起作用）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24636749/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding space between words in Bootstrap 3.0 (HTML escape characters do not work)
提问by krex
Stackoverflow, please help!
Stackoverflow，请帮忙！
I am developing a website using Bootstrap (3.1.1) and AngularJS for my friend's photography business.
我正在使用 Bootstrap (3.1.1) 和 AngularJS 为我朋友的摄影业务开发一个网站。
The problem which I am encountering arises when trying to add a tab-space between words in the navigation bar, for example:
我在尝试在导航栏中的单词之间添加制表符时遇到的问题，例如：
<a href="#/" class="navbar-brand">JOHN 		 DOE</a>
The only way in which I have been able to get this to work is by using <pre>tags, but this results in a completely different styling to that which is desired.
我能够让它工作的唯一方法是使用<pre>标签，但这会导致与所需的样式完全不同。
I have tried with and without using the AngularJS $Sanitizemodule, which had no affect.
我曾尝试使用和不使用 AngularJS$Sanitize模块，但没有任何影响。
I think I am missing something fundamental but I am obviously unsure as to what that is.
我想我错过了一些基本的东西，但我显然不确定那是什么。
Thanks in advance,
提前致谢，
JohnDoe
约翰·多伊
回答by Aibrean
Using a span would provide much cleaner code.
使用跨度会提供更清晰的代码。
<a href="#/" class="navbar-brand">JOHN<span class="tab-space">DOE</span></a>
<a href="#/" class="navbar-brand">JOHN<span class="tab-space">DOE</span></a>
Then the css:
然后是css：
span.tab-space {padding-left:5em;}
span.tab-space {padding-left:5em;}
回答by rybo111
Use CSS word spacing:
使用 CSS 字间距：
a.navbar-brand{
word-spacing:5em;
}
Or if you only want tab spaces in certain points, use:
或者，如果您只想要某些点的制表符空间，请使用：
<span class="tab-space"> </span>
And a similar CSS:
还有一个类似的 CSS：
span.tab-space {
word-spacing:5em;
}
回答by dave
You could also do:
你也可以这样做：
.navbar-brand {
{
white-space:pre;
}
To make the browser not collapse whitespace.
使浏览器不会折叠空白。
回答by matt
When styles to websites, its best practice to separate HTML markup from the CSS stylings of the page so that the content and stylings act independently and are more easily interchangable. This being said, its not clean to use HTML entities such as to affect style because it breaks this rule.
为网站设置样式时，最佳做法是将 HTML 标记与页面的 CSS 样式分开，以便内容和样式独立运作并且更容易互换。话虽如此，使用 HTML 实体 来影响样式并不干净，因为它违反了这条规则。
If you want some whitespace, wrap a <span>tag around the text and give it some padding.
如果你想要一些空白，<span>在文本周围包裹一个标签并给它一些填充。
HTML:
HTML：
<a href="#/" class="navbar-brand">JOHN <span class="space-left">DOE</span></a>
CSS:
CSS：
.space-left{
padding-left:10px;
}
