页脚字体真棒图标在我的 bluefish 编码器上没有响应

Question

我在网络配置文件中添加了页脚。在 codepen 上一切正常，但是当我将相同的代码放在 bluefish coder 上时，电子邮件图标会出现在 facebook 和 instagram 图标下方。

我希望它们对齐。一个在另一个的一边。他们三个。我没有放 span 或类似的东西。我将规格放在下面。

p {
  display: inline-block;
}

<!-- bootstrap version and the one I know how to work with -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- ======font awesome======= -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<!-- The font awesome icons I put -->

<div class="navbar navbar-inverse navbar-static-bottom">
  <div class="container">
    <div class="navbar-text pull-left">
      <p>© 2017 All Rights Reserved</p>
      <p style="font-family: Dancing Script;font-size: 17px;"> Marina Sanchez </p>
    </div>
    <div class="navbar-text pull-right" style="display: inline-block;">
      <a href="https://www.facebook.com/marina.sanchez.125"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
      <a href="https://www.instagram.com/marina_k25/"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
      <a href="mailto:foobar@gmail.com" class="btn btn-lg btn-block btn-social btn-email"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
        </a>


    </div>
  </div>
</div>

我已经完成了所有的事情，但我仍然卡在这个问题上，有人可以帮助我吗。

下面还有我的代码笔，它的页脚正在工作，但在我的 bluefish 编码器上没有。

https://codepen.io/JT_Cerqueira/full/WZbEdq/

Answer 1

您的邮件图标位于其他图标下方的原因是因为您的图标上有一个 class，并且它以 display:block; 的形式插入。要解决此问题，只需删除此 class class="btn btn-lg btn-block btn-social btn-email">。另外，去掉不必要的胡萝卜，你把它解析为文本并且无效 HTML.

<!-- bootstrap version and the one I know how to work with -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>  

/*=============footer============*/
p {
  display: inline-block;
}

</style> 
  <!-- ======font awesome======= -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">  

<!-- The font awesome icons I put -->

<div class="navbar navbar-inverse navbar-static-bottom">
  <div class="container">
        <div class="navbar-text pull-left">
          <p>© 2017 All Rights Reserved</p>
            <p style="font-family: Dancing Script;font-size: 17px;"> Marina Sanchez </p>  
        </div>
       <div class="navbar-text pull-right" style="display: inline-block;">
       <a href="https://www.facebook.com/marina.sanchez.125"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
      <a href="https://www.instagram.com/marina_k25/"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
       <a href="mailto:foobar@gmail.com"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
        </a>
        
  
        </div>
      </div>
    </div>

Answer 2

<!-- bootstrap version and the one I know how to work with -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>  

/*=============footer============*/
p {
  display: inline-block;
}

</style> 
  <!-- ======font awesome======= -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">  

<!-- The font awesome icons I put -->

<div class="navbar navbar-inverse navbar-static-bottom">
  <div class="container">
        <div class="navbar-text pull-left">
          <p>© 2017 All Rights Reserved</p>
            <p style="font-family: Dancing Script;font-size: 17px;"> Marina Sanchez </p>  
        </div>
       <div class="navbar-text pull-right" style="display: inline-block;">
       <a href="https://www.facebook.com/marina.sanchez.125"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
      <a href="https://www.instagram.com/marina_k25/"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a> 
       <a href="mailto:foobar@gmail.com"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
        </a>
        
  
        </div>
      </div>
    </div>

现在您可以 运行代码段 正确的结果。

页脚字体真棒图标在我的 bluefish 编码器上没有响应

footer font-awesome icon is not respoding on my bluefish coder

html

css

footer

twitter-bootstrap