Question

我只想在 a -tag中为bootstrap glyphicons添加一些额外的右边距，但它无法解决。菜单如下：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
   <ul class="nav navbar-nav">
       <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
             <i class="glyphicon glyphicon-open"></i>Choose project...<b class="caret"></b></a>
             <ul class="dropdown-menu"> 
                <li><a href="#">Project 1</a></li>
                <li><a href="#">Project 2</a></li>
             </ul>
       </li>
       <li>
           <a href="#" class="btn-file">
              <i class="glyphicon glyphicon-folder-open"></i>
              Open layer...<input type="file">
           </a>
       </li>
    </ul>

我试图使用的CSS是：

a > .glyphicon {
    margin-right: 6px;
}

菜单看起来很好，在内联样式中设置边距时，甚至在实时编辑网站时（使用MagiCSS），选择器也能正常工作。但是当从文件加载它时，它没有任何效果（我检查了我是否正在编辑正确的.css文件并重新加载了浏览器缓存）..

有人在这看到什么吗？这可能是因为字形继承了一些引导样式吗？

提前感谢您的任何帮助/建议金

解决谢谢Paulie_D的提示。我无法在JSFiddle中重现这一点，但添加了

i { display: inline-block; }

在我的本地副本上做了伎俩！

Answer 1

试试这个

a > .glyphicon {
    margin-right: 6px!important;
}

为glyphicons添加边距

1 个答案: