1. ホーム
  2. 質問と答え
  3. フォントのawesomeキャレットアップとキャレットダウンの積み重ね

フォントのawesomeキャレットアップとキャレットダウンの積み重ね

2017-03-10 6 views
5

私は2つのフォントワームアイコンをキャレットアップして、キャレットを隠したり、他のものを表示せずにスタックしてスタックするようにしていますか？どんな提案も大歓迎です。ここ はブートストラップとfontawesomeとpluckerです：https://plnkr.co/edit/S1rSo41lkG4ZPjnaS0lf?p=previewフォントのawesomeキャレットアップとキャレットダウンの積み重ね

<div class="col-md-4 col-xs-12"> 
    <div class="pull-left"> 
    <i class="fa fa-caret-up pull-left" aria-hidden="true"></i> 
    <i class="fa fa-caret-down pull-left" aria-hidden="true"></i> 
    <span style="padding-right: 8px">Worker</span> 
    </div> 
    <div class="pull-left"> 
    <i class="fa fa-caret-up pull-left" aria-hidden="true"></i> 
    <i class="fa fa-caret-down pull-left" aria-hidden="true"></i> 
    <span style="padding-right: 8px">Entitlement</span> 
    </div> 
    <div class="pull-left"> 
    <i class="fa fa-caret-up pull-left" aria-hidden="true"></i> 
    <i class="fa fa-caret-down pull-left" aria-hidden="true"></i> 
    <span style="padding-right: 8px">Request Date</span> 
    </div> 
</div>

出典

2017-03-10 Rethabile

答えて

3

あなたがここにい

実施例

<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <link data-require="[email protected]" data-semver="4.4.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
 
    <script data-require="[email protected]" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div class="col-md-6 col-xs-12"> 
 
     <div class="pull-left row"> 
 
     <div class="col-md-1 col-xs-1"> 
 
     <div class="row"> 
 
     <div class="col-md-12 col-xs-12"> 
 
     <i class="fa fa-caret-up pull-left" aria-hidden="true"></i> 
 
     </div> 
 
     <div class="col-md-12 col-xs-12"> 
 
     <i class="fa fa-caret-down pull-left" aria-hidden="true"></i> 
 
     </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-8 col-xs-8"> 
 
     <span style="padding-right: 8px">Worker</span> 
 
     </div> 
 
     </div> 
 
     
 
    <div class="pull-left row"> 
 
     <div class="col-md-1 col-xs-1"> 
 
     <div class="row"> 
 
     <div class="col-md-12 col-xs-12"> 
 
     <i class="fa fa-caret-up pull-left" aria-hidden="true"></i> 
 
     </div> 
 
     <div class="col-md-12 col-xs-1"> 
 
     <i class="fa fa-caret-down pull-left" aria-hidden="true"></i> 
 
     </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-8 col-xs-8"> 
 
     <span style="padding-right: 8px">Entitelment</span> 
 
     </div> 
 
     </div> 
 
    <div class="pull-left row"> 
 
     <div class="col-md-1 col-xs-1"> 
 
     <div class="row"> 
 
     <div class="col-md-12 col-xs-12"> 
 
     <i class="fa fa-caret-up pull-left" aria-hidden="true"></i> 
 
     </div> 
 
     <div class="col-md-12 col-xs-12"> 
 
     <i class="fa fa-caret-down pull-left" aria-hidden="true"></i> 
 
     </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-8 col-xs-8"> 
 
     <span style="padding-right: 8px">Request Date</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

出典

2017-03-10 15:05:59 neophyte

0

system--この使用してブートストラップグリッドを実現することができますフレックスボックスを使用するソリューション：

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
    <link data-require="[email protected]" data-semver="4.4.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
    <script data-require="[email protected]" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div class="col-md-4 col-xs-12"> 
     <div class="pull-left"> 
     <div class='icon-container'> 
      <i class="fa fa-caret-up pull-left" aria-hidden="true"></i> 
      <i class="fa fa-caret-down pull-left" aria-hidden="true"></i> 
     </div> 
     <span style="padding-right: 8px">Worker</span> 
     </div> 
     <div class="pull-left"> 
     <div class='icon-container'> 
      <i class="fa fa-caret-up pull-left" aria-hidden="true"></i> 
      <i class="fa fa-caret-down pull-left" aria-hidden="true"></i> 
     </div> 
     <span style="padding-right: 8px">Entitlement</span> 
     </div> 
     <div class="pull-left"> 
     <div class='icon-container'> 
      <i class="fa fa-caret-up pull-left" aria-hidden="true"></i> 
      <i class="fa fa-caret-down pull-left" aria-hidden="true"></i> 
     </div> 
     <span style="padding-right: 8px">Request Date</span> 
     </div> 
    </div> 
    </body> 

</html>

CSS：

.icon-container { 
    display: flex; 
    flex-direction: column 
} 

.pull-left { 
    display: flex; 
} 

span { padding-top: 4px; }

新しいplunk

出典

2017-03-10 15:11:25 Ren

3

これを行うための別の方法は.fa-stackと、このようなCSSとHTMLのビットである。

  • あなたから.pull-leftを削除します<i>
  • 各ペアの周り<span class="fa fa-stack"></span>を入れ

.fa-stack { 
 
    text-align: center; 
 
} 
 

 
.fa-stack .fa-caret-down { 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 

 
.fa-stack .fa-caret-up { 
 
    position: absolute; 
 
    top: 0; 
 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> 
 

 
<div class="col-md-4 col-xs-12"> 
 
    <div class="pull-left"> 
 
    <span class="fa fa-stack"> 
 
     <i class="fa fa-caret-down" aria-hidden="true"></i> 
 
     <i class="fa fa-caret-up" aria-hidden="true"></i> 
 
    </span> 
 
    <span style="padding-right: 8px">Worker</span> 
 
    </div> 
 
    <div class="pull-left"> 
 
    <span class="fa fa-stack"> 
 
     <i class="fa fa-caret-up" aria-hidden="true"></i> 
 
     <i class="fa fa-caret-down" aria-hidden="true"></i> 
 
    </span> 
 
    <span style="padding-right: 8px">Entitlement</span> 
 
    </div> 
 
    <div class="pull-left"> 
 
    <span class="fa fa-stack"> 
 
     <i class="fa fa-caret-up" aria-hidden="true"></i> 
 
     <i class="fa fa-caret-down" aria-hidden="true"></i> 
 
    </span> 
 
    <span style="padding-right: 8px">Request Date</span> 
 
    </div> 
 
</div>

出典

2017-03-10 15:12:09

関連する問題

 関連する問題