Question

在我的项目中，我正在使用bootstrap。但是我遇到了这个令人沮丧的问题，即邮件图标不会出现在同一行。

目前我有这个：

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

我知道如何解决这个问题（没有margin-top）

Answer 1

这看起来非常漂亮。垂直对齐将强制它将其正确地放在线上。但后来我发现它还有点偏差，所以我使用了margin-top：-3px让它看起来好一点。

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

完整代码：

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

同一行上的图标

2 个答案: