字体很棒的插入号和插入号彼此堆叠 [英] Font-awesome caret up and caret down stacked on top of each other
本文介绍了字体很棒的插入号和插入号彼此堆叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图将两个字体很棒的图标插入并向下插入，以便在不停止隐藏并显示另一个的情况下彼此堆叠?任何建议将不胜感激.这是具有Bootstrap和fontawesome的工具: https://plnkr.co/edit/S1rSo41lkG4ZPjnaS0lf?p=预览
I am trying to get two fontawesome icons caret up and caret down to stack on stop of each other without hiding one and showing the other? Any suggestions would be greatly appreciated. Here is a plucker with Bootstrap and fontawesome: https://plnkr.co/edit/S1rSo41lkG4ZPjnaS0lf?p=preview
<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>
推荐答案
您可以使用自举网格系统实现此目标-
You can achieve this using bootstrap grid system--
工作示例
<html>
<head>
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link data-require="fontawesome@4.4.0" 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="bootstrap@3.3.7" 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>这篇关于字体很棒的插入号和插入号彼此堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
