Question

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

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

＆＃13;

p {
  display: inline-block;
}

＆＃13;

<!-- 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>

＆＃13;

我已经完成了所有事情而且我被困在这一个上，任何人都可以帮助我。

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

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

Answer 1

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

＆＃13;

<!-- 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>

＆＃13;

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>

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

footer font-awesome图标不会在我的鲑鱼编码器上重新编码

2 个答案: