बूटस्ट्रैप 3 ग्लाइफिकॉन एड ऑन

Question

बोलो ऐड ऑन में ग्लाइफिकॉन के मेरे एचटीएमएल (जेड में) है।

.input-group 
    input.form-control(type='text') 
    span.input-group-addon.glyphicon.glyphicon-calendar 

हालांकि एडन इनपुट फ़ील्ड के साथ गठबंधन नहीं है। Screeshot:

यह सामान्य या बूटस्ट्रैप 3 में एक बग है?

अद्यतन

मिल गया: bootstrap.css में: 2171 (कम से संकलित)

.glyphicon{ ...; top: 1px; ...} 

बग?

Answer 1

हाँ, यह मेरी लिए एक बग लगता है: यह एक बग है: https://github.com/twbs/bootstrap/issues/10936

मैं इस https://github.com/twbs/bootstrap/issues/9850 पहले पढ़ें।

मैं इस के लिए इस कोड का उपयोग करें: Firefox के लिए

<div class="container"> 
<br> 
<div class="input-group"> 
    <span class="input-group-addon glyphicon glyphicon-star"></span>  
    <input type="text" class="form-control" placeholder="Username"> 
</div> 
<br> 
<div class="input-group input-group-sm"> 
    <span class="input-group-addon glyphicon glyphicon-star"></span>  
    <input type="text" class="form-control" placeholder="Username"> 
</div> 
<br> 
<div class="input-group input-group-lg"> 
    <input type="text" class="form-control" placeholder="Username"> 
    <span class="input-group-addon glyphicon glyphicon-star"></span>  
</div> 
<br> 
<div class="input-group"> 
    <input type="text" class="form-control" placeholder="Username"> 
    <span class="input-group-addon glyphicon glyphicon-star"></span>  
</div> 
<br> 
<div class="input-group input-group-sm"> 
    <input type="text" class="form-control" placeholder="Username"> 
    <span class="input-group-addon glyphicon glyphicon-star"></span>  
</div> 
<br> 
<div class="input-group input-group-lg"> 
    <input type="text" class="form-control" placeholder="Username"> 
    <span class="input-group-addon glyphicon glyphicon-star"></span>  
</div> 
<br> 
<div class="input-group input-group-lg"> 
    <input type="text" class="form-control" placeholder="Username"> 
    <span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>  
</div> 
<br> 
</div> 

परिणाम:

:

एक समस्या input-group-lg के लिए डबल अवधि इनपुट लंबे समय तक (कारण के लिए बनाता होगा। ग्लाइफिकॉन: खाली) लेकिन समस्या को ठीक नहीं किया। मुझे यह समस्या नहीं मिली .glyphicon{ ...; top: 1px; ...} भी मिला।

Firefox के लिए मैं इस समाधान पाया:

bootstrap.css से

:

.input-group-lg > .form-control, 
.input-group-lg > .input-group-addon, 
.input-group-lg > .input-group-btn > .btn { 
    height: 45px; 
    padding: 10px 16px; 
    font-size: 18px; 
    line-height: 1.33; 
    border-radius: 6px; 
} 

10px से खड़ी गद्दी बदलने समस्या हल हो जाती 9px करने के लिए।

यह सीएसएस नियम form.less (। इनपुट-lg() इनपुट इनपुट समूह से कॉल से आता है) @ पैडिंग-बड़े-लंबवत का उपयोग करके: 10px; (Variables.less से)

गूगल क्रोम में मैं समस्या का एक ही तरह मिल गया है, सभी आकारों के लिए देखें:

इस मामले में यह डबल अवधि का उपयोग करने में मदद करता है:

`<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>` 

Answer 2

बूटस्ट्रैप 3 के वर्तमान संस्करण के साथ बास 'जवाब स्पष्ट करने के लिए, तुम सब करने की जरूरत है:

<div class="input-group input-group-lg"> 
    <input type="text" class="form-control"> 
    <span class="input-group-addon"><span class=" glyphicon glyphicon-star"></span></span> 
</div> 

दूसरे शब्दों में, दस्तावेज़ों में वर्णित मूल बूटस्ट्रैप मार्कअप।

Answer 3

मैं

.glyphicon{ line-height: 1em; }

Answer 4

<div class="input-prepend input-append"> 
    <span class="add-on"> <i class="icon-user"></i></span> 
    <input class="span2" id="appendedPrependedInput" type="text"> 
    <span class="add-on"> <i class="icon-envelope"></i></span> 
</div> 

Answer 5

साथ यह तय

स्थानीय ओवरराइड:

<style type="text/css"> 
    .glyphicon { 
     top: 0; 
    } 
</style> 

Answer 6

बटन जगह के भीतर

एचटीएमएल कोड '& nbsp'

& nbsp

Answer 7

<span class="input-group-addon"><i class="glyphicon glyphicon-user glyphicon-color"></i></span> 

Answer 8

मैंने ग्लिफिकॉन में रहने वाली अवधि शैली में "स्थिति: प्रारंभिक" जोड़कर इसे ठीक किया है या आप इस तरह सीएसएस का उपयोग कर सकते हैं।

.glyphicon { 
    position: initial; 
} 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="form-group"> 
 
    <div class="input-group"> 
 
    <span class="input-group-addon glyphicon glyphicon-tags" style="position:initial"></span> 
 
    <input type="text" class="form-control" placeholder="Tags" /> 
 
    </div> 
 
</div>

Answer 9

पुरानी पोस्ट लेकिन यह किसी की मदद कर सकते हैं: मैं एक बटन का उपयोग करें और यह पूरी तरह से काम करता है!

<div class="input-group"> 
     <input type="text" class="form-control" placeholder="Filter"/> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-filter"></span></button> 
     </span>       
    </div>