フッタfont-awesomeアイコンがブルーフィッシュコーダで再フォーマットされない

Question

私はウェブプロファイルにフッタを追加しました。コードコーンではすべて機能しましたが、bluefishコーダーに同じコードを入力すると、電子メールアイコンがfacebookおよびinstagramアイコンの下に表示されます。

私はそれらを整列させたいと思います。もう一方の側に1つ。彼らの3人。私はスパンやそれに類するものを入れていない。私は以下の仕様を入れています。

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>

私はすべてを終了していると私は誰も私を助けてください可能性があり、この1にこだわっています。

また、フッターが動作している私の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 --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<style> 
 

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

 
</style> \t 
 
    <!-- ======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"> 
 
\t \t <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 --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<style> 
 

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

 
</style> \t 
 
    <!-- ======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"> 
 
\t \t <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することができます。