footer font-awesome图标在我的bluefish编码器上没有响应

Question

我在webprofile中添加了一个页脚。在codepen上一切正常，但是当我在bluefish编码器上放置相同的代码时，电子邮件图标会在facebook和instagram图标下方。

我希望他们能够保持一致。一个在另一边。他们三个。我没有放过跨度或类似的东西。我在下面列出了规格。

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:[email protected]" 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>

我已经完成了所有的事情而且我坚持这个，任何人都可以帮助我。

下面是我的脚本工作的codepen，但不是我的bluefish编码器。

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

Answer 1

你的邮件图标位于其他图标下面的原因是因为你有一个类，它正在以display:block;的形式进入。要解决此问题，只需删除此类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:[email protected]"><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:[email protected]"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
        </a>
        
  
        </div>
      </div>
    </div>

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