同じ行のアイコン

Question

私のプロジェクトでは、ブートストラップを使用しています。しかし、私はメールアイコンが同じ行にならない、この不満な問題を抱えています。

は現在、私はこれを持っている：私は（ margin-topなし）この問題を解決できる方法

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
     rel="stylesheet"> 
 
     
 
<div class="panel panel-primary"> 
 
    <div class="panel-heading"> 
 
     <div class="row"> 
 
     <div class="col-md-10"> 
 
      <a style="color: white;" href="#">Username</a> - 
 
      <a style="color:white;" href="#">Corporation</a> 
 
      <i class="material-icons">&#xE0BE;</i> 
 
     </div> 
 

 
     <div class="col-md-2"> 
 
      <p>time</p> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <div class="panel-body"> 
 
     <div class="row" style="border-bottom: 1px solid black"> 
 
     <div class="col-md-12 panel-body-margin-bottom"> 
 
      <h3>subject</h3> 
 
     </div> 
 
     </div> 
 

 
     <div class="row trix-content"> 
 
     <div class="col-md-12 panel-body-margin-top"> 
 
      <p>Message</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
       

任意のアイデアが

Answer 1

これはかなりきれいに見えます。垂直方向に配置すると、ライン上に正しく配置されます。しかし、それからまだ少ししかないことに気づいたので、私はマージントップを使いました。

<i class="material-icons" style="margin-top:-3px;vertical-align:middle;">&#xE0BE;</i> 

全コード：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
     rel="stylesheet"> 
 
     
 
<div class="panel panel-primary"> 
 
    <div class="panel-heading"> 
 
     <div class="row"> 
 
     <div class="col-md-10"> 
 
      <a style="color: white;" href="#">Username</a> - 
 
      <a style="color:white;" href="#">Corporation</a> 
 
      <i class="material-icons" style="margin-top:-3px;vertical-align:middle;">&#xE0BE;</i> 
 
     </div> 
 

 
     <div class="col-md-2"> 
 
      <p>time</p> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <div class="panel-body"> 
 
     <div class="row" style="border-bottom: 1px solid black"> 
 
     <div class="col-md-12 panel-body-margin-bottom"> 
 
      <h3>subject</h3> 
 
     </div> 
 
     </div> 
 

 
     <div class="row trix-content"> 
 
     <div class="col-md-12 panel-body-margin-top"> 
 
      <p>Message</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
       

Answer 2

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
     rel="stylesheet"> 
 
     
 
<div class="panel panel-primary"> 
 
    <div class="panel-heading"> 
 
     <div class="row"> 
 
     <div class="col-md-10" > 
 
      <span style="vertical-align:super;"><a style="color: white;" href="#">Username</a> - 
 
      <a style="color:white;" href="#">Corporation</a> </span> 
 
      <span><i class="material-icons" style=" font-size: 19px;">&#xE0BE;</i></span> 
 
      
 
     </div> 
 

 
     <div class="col-md-2"> 
 
      time 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <div class="panel-body"> 
 
     <div class="row" style="border-bottom: 1px solid black"> 
 
     <div class="col-md-12 panel-body-margin-bottom"> 
 
      <h3>subject</h3> 
 
     </div> 
 
     </div> 
 

 
     <div class="row trix-content"> 
 
     <div class="col-md-12 panel-body-margin-top"> 
 
      <p>Message</p> 
 
     </div> 
 
     </div> 
 
    </div>