看起来相同的CSS和标记呈现不同

-2

我已经购买了Ambrosia bootstrap主题，但在实现登录页面时遇到问题。我的登录页面可以找到here。看起来相同的CSS和标记呈现不同

我遇到的问题是页面内文本左侧的小推特，Facebook和信息图标。由于某些奇怪的原因，我的图标和后面的单词之间缺少右侧的空间。我不能为我的生活找到差异。请有任何想法吗？

2013-09-26 codedog

所有你需要做的就是扔的图标和按钮的文本之间的空间：

<a href="#" class="btn btn-twitter"><i class="icon icon-twitter"></i>Twitter</a>

要：

<a href="#" class="btn btn-twitter"><i class="icon icon-twitter"></i> Twitter</a>

来源

2013-09-26 08:32:31

与其说是空间，但是， – SaturnsEye

Twitter的引导本身不使用非打破空间 - http://getbootstrap.com/2.3。 2/base-css.html＃图标 –

谢谢，但那不是重点。还有其他方法可以实现它。示例登录页面没有额外的空间，我的也没有引用相同的CSS，但呈现不同。我尽可能以相同的方式实现它，所以我很可能会错过某些明显的东西。 – codedog

网站范围的解决将是以下：变化：

[class^="icon-"]:before, [class*=" icon-"]:before { 
    display: inline-block; 
    text-decoration: inherit; 
}

到

[class^="icon-"]:before, [class*=" icon-"]:before { 
     display: inline-block; 
     text-decoration: inherit; 
     margin-right: 5px; 
    }

in font-awesome.css。但如果它只是这些，你将需要把空间像Dontfeedthecode字Facebook和Twitter的面前说:)

来源

2013-09-26 08:34:52

-1

右下面的部分添加填充CSS文件中的字体，awesome.css ln160：

/* Bootstrap 2.0 sprites.less reset */ 
[class^="icon-"], 
[class*=" icon-"] { 
display: inline; 
width: auto; 
height: auto; 
line-height: normal; 
vertical-align: baseline; 
background-image: none; 
background-position: 0% 0%; 
background-repeat: repeat; 
padding-right: 5px; <!-- This is the important line --!> 
}

来源

2013-09-26 08:34:59

你不应该修改引导类。相反，您应该将自己的类添加到元素（除了引导程序之外）！ –

只需在空格键之前的空格键处添加空格键，然后您就可以使用空格键。

而不是

<a href="#" class="btn btn-facebook"><i class="icon icon-facebook"></i>Facebook</a>

使用

<a href="#" class="btn btn-facebook"><i class="icon icon-facebook"></i> Facebook</a>

来源

2013-09-26 08:35:51 SKeurentjes

看起来相同的CSS和标记呈现不同

回答

相关问题