1. Dom
  2. Pytanie i odpowiedź
  3. Wspaniała czcionka i ostrożność w stosach jedna na drugiej

Wspaniała czcionka i ostrożność w stosach jedna na drugiej

2017-03-10 15 views
5

Próbuję uzyskać dwie fontawalne ikony, które dbają o to, aby na siebie się zatrzymać, nie ukrywając jednego i nie pokazując drugiego? Wszelkie sugestie będą bardzo mile widziane. Oto plucker z bootstrap i fontawesome: https://plnkr.co/edit/S1rSo41lkG4ZPjnaS0lf?p=previewWspaniała czcionka i ostrożność w stosach jedna na drugiej

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

Źródło

2017-03-10 Rethabile

Odpowiedz

3

Można to osiągnąć przy użyciu Bootstrap ruszt system--

Przykład roboczy

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

Źródło

2017-03-10 15:05:59 neophyte

0

tutaj rozwiązanie wykorzystujące flexbox:

<!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; }

nowy plunk

Źródło

2017-03-10 15:11:25 Ren

3

Innym sposobem na to jest z .fa-stack i trochę CSS i HTML tak:

  • Usuń .pull-left ze swojego <i>
  • Umieść <span class="fa fa-stack"></span> wokół każdej pary

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

Źródło

2017-03-10 15:12:09

Powiązane problemy

 Powiązane problemy