Texteingabe bootstrap vergrößern

Question

Ich habe mich bemüht, das Texteingabefeld 'txtProduct' größer zu machen. Ich hatte einige milde Erfolge, aber es scheint, dass die Inline-Natur der Felder es mir verbietet, dies mit Bootstrap richtig zu machen. Ich könnte mir vorstellen, dass es eine einfache Lösung ist, aber ich bin kein Front-End-Mensch. Bitte machen Sie Vorschläge. Ich mag es so etwas wie col-md-10 oder etwas um dort zu sein ...

Ich brauche das erste Textfeld viel größer.

<div class="row"> 
     <div class="col-md-2"></div> 
     <div class="col-md-8"> 
      <p class="lead">xxxxx</p> 
      <form class="form-inline"> 
       <div class="form-group col-xs-push-10 col-md-pull-10"> 
         <input class="form-control input-lg" id="txtProduct" name="txtProduct" type="text" placeholder="e.g. ALFALFA SPROUTS" autocomplete="on"> 
        </div> 
       <div class="form-group"> 
        @Html.DropDownListFor(x => x.Markets, new SelectList(Model.Markets, "Value", "Text"), new { @class = "form-control input-lg" }) 
       </div> 
       <button type="button" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-search"></span></button> 
      </form> 
      <div id="status" name="status"></div> 
     </div> 
     <div class="col-md-2"></div> 
    </div> 

Answer 1

Dies könnte es tun. Entweder integrieren in Ihre CSS-Datei, oder es im Körper in Top-Paste:

<style> 
    .input-lg {font-size:2rem;padding:3px 7px;} 
</style> 

Experiment mit font-size - das ist in erster Linie, was das Eingabefeld macht größer, obwohl Sie auch height:2rem; und width:3rem; Größe verwenden können das Feld, ohne die Textgröße zu ändern.

Auch wissen Sie den Unterschied zwischen px, em, rem und vw/vh in Schriftgröße. Viele gute Erklärungen google-fähig, vor allem von css-tricks.com.

Answer 2

Sie können dies versuchen, um die Schriftgröße des Eingangstyps zu vergrößern.

input[type='text']{ 
font-size: 20px; 
}