Önyükleme girdi grubunu bir metin alanının üstüne nasıl taşıyabilirim?

Question

Bu eklentiyi metin kutusunun üstüne taşımaya çalışıyorum, ancak tasarımı kırmadan bunu yapmanın kolay bir yolunu göremiyorum. İşte

benim geçerli kod:

<div class="input-group"> 
    <span class="input-group-addon redbar">Some long<br>addon text here:</span> 
     <input type="text" 
       name="someName" 
       maxlength="11" 
       style="height:134%;" 
       class="form-control" 
       title="some title" 
       placeholder="the content"/> 
</div> 

(satır sonu ekleme ve benim yara bandı çözümü yüksekliğini oldu ayarlanması.) Ben bir etiket kullanabilirsiniz anlıyorum ama yapıyor Bu yüzden sitenin geri kalanıyla tutarsız hale getirir (bir şekilde aynı şekilde biçimlendirilmemişse).

Çeşitli SO yayınlarına bakmayı denedim, ancak alakalı hiçbir şey görmedim. Bootstrap ile bu mümkün mü?

.redbar{ 
    text-align:center; 
} 

https://jsfiddle.net/f9feamb2/

Answer 1

Nasıl görüntülenmesini istediğinizden emin değilim. Nasıl istediğini gösteren bir resim gösterebilirsen, kesin çözüm bulabiliriz. Ancak, sanırım senin parçanda olabilir sanırım this fiddle.

İşaretlemenize ile neler oluyor

.redbar{ 
 
text-align: center; 
 
border-image: none; 
 
border-radius: 3px !important; 
 
border-left: 3px solid red !important; 
 
border-right: 3px solid red !important; 
 
display: block !important; 
 
width: 150px !important; 
 
margin: 0px auto; 
 
    float: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="input-group"> 
 
    <span class="input-group-addon redbar">Some long<br>addon text here:</span> 
 
     <input type="text" 
 
       name="someName" 
 
       maxlength="11" 
 
       style="height:134%;" 
 
       class="form-control" 
 
       title="some title" 
 
       placeholder="the content"/> 
 
</div>

Answer 2

<div class="input-group"> 
<div class="col-xs-12 redbar">Some long<br>addon text here:</div> 
<input type="text" 
    name="someName" 
    maxlength="11" 
    style="height:134%;" 
    class="form-control" 
    title="some title" 
    placeholder="the content"/> 
</div> 

CSS Bu size ihtiyaç sonuç olduğunu düşünüyorum. Sınıfı .input-group-addon kaldırıldı