1. घर
  2. सवाल और जवाब
  3. फ़ॉन्ट-कमाल की देखभाल और एक दूसरे के शीर्ष पर खड़े होकर

फ़ॉन्ट-कमाल की देखभाल और एक दूसरे के शीर्ष पर खड़े होकर

2017-03-10 10 views
5

मैं दो फ़ॉन्ट करने योग्य आइकन की देखभाल करने की कोशिश कर रहा हूं और एक दूसरे को रोकने और दूसरे को दिखाने के बिना एक-दूसरे के स्टॉप पर ढेर करने की कोशिश कर रहा हूं? किसी भी सुझाव के लिए बहुत आभार होगा। 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>

स्रोत

2017-03-10 Rethabile

उत्तर

3

आप प्राप्त कर सकते हैं इस का उपयोग कर बूटस्ट्रैप ग्रिड system--

कार्य उदाहरण

<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

यहाँ: यहाँ बूटस्ट्रैप और fontawesome के साथ एक plucker है एक समाधान जो फ्लेक्सबॉक्स का उपयोग करता है:

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

सीएसएस:

.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 के साथ है और इस तरह सीएसएस और एचटीएमएल का एक सा:

  • से .pull-left निकालें अपने <i>
  • प्रत्येक जोड़ी

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

के चारों ओर एक <span class="fa fa-stack"></span> रखो

स्रोत

2017-03-10 15:12:09

संबंधित मुद्दे

 संबंधित मुद्दे