は、私がパネルにブートストラップでこれを作成するブートストラップパネル

Question

に個人的なヘッダを作成します。

あなたは、私がこれをコーディングすることができますどのように、知っていますか？私はちょうどCSSを学び始めています。あなたの助けが私の知識を向上させるのに役立ちます。

Answer 1

マイコード：

<div class="panel panel-primary"> 
      <div class="panel-heading"> 
       <div class="container-fluid panel-container"> 
        <div class="col-xs-2 text-left" style="margin-left: -20px;"> 
         <div> 
          <img src="img/categories/mode.jpg" class="" width="35px" height="35px"> 
         </div> 
        </div> 
        <div class="col-xs-6 text-left" style="margin-left: 10px; margin-top: 4px;"> 
         <div style="display: inline-block; position: absolute; margin-top: -7px;"> 
          <p>Valentin MARTIN</p> 
          <p class="espace">Il y a 5 minutes, <span class="fa fa-map-marker">&nbsp;</span>Saint-Patersbourg</p> 
         </div> 
        </div> 
        <div class="col-xs-4 text-right"> 
         <div style="display: inline-block; position: relative; margin-top: 3px;"> 
          <img src="img/logo/share-256.png" width="30px" height="30px"> 
         </div> 
         <div style="display: inline-block; position: absolute; margin-left: 4px; margin-top: 3px;"> 
          <img src="img/logo/coeur.png" width="30px" height="30px"> 
         </div> 
        </div> 
        <div class="clearfix"></div> 
       </div> 
      </div> 
      <div class="panel-body"> 
       <img src="img/background.png" style="width: 100%; height:170px; background-size: cover;"> 
      </div> 
      <div class="panel-footer"> 

      </div> 
     </div> 

マイ結果：Picture