字体 - 令人敬畏的插入和插入在彼此之上

Question

字体 - 令人敬畏的插入和插入在彼此之上

Ret*_*ile 5 css twitter-bootstrap font-awesome

我试图得到两个fontawesome图标插入并插入彼此停止堆叠而不隐藏一个并显示另一个？任何建议将不胜感激.这是一个Bootstrap和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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jua*_*llo 5

另一种方法是使用.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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

neo*_*yte 3

您可以使用引导网格系统来实现这一点——

工作示例

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，7 月前
查看次数：	2873 次
最近记录：	8 年，7 月前