aumenta la dimensione della casella di testo bootstrap (ASP.NET MVC)

Question

C'è un modo per aumentare la dimensione (lunghezza) delle caselle di testo in una forma orizzontale?

<div class="form-horizontal"> 
    <div class="form-group"> 
     @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
       @Html.TextBoxFor(model => model.Name, new { @class = "form-control" }) 
       @Html.ValidationMessageFor(model => model.Name) 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Create" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
</div> 

Ho provato a cambiare le col-md-* classi, ma non ha funzionato.

Answer 1

Un modo alternativo per farlo è quello di cambiare solo la classe col-md-x su il div che avvolge la tua casella di testo e il messaggio di convalida alla larghezza desiderata.

Ad esempio, modificare questo:

<div class="col-md-10"> 
    @Html.TextBoxFor(model => model.Name, new { @class = "form-control" }) 
    @Html.ValidationMessageFor(model => model.Name) 
</div> 

a questo:

<div class="col-md-5"> 
    @Html.TextBoxFor(model => model.Name, new { @class = "form-control" }) 
    @Html.ValidationMessageFor(model => model.Name) 
</div> 

E adesso la tua casella di testo sarà la larghezza di 5 colonne, invece di 10. Questo non richiede lezioni extra e un ulteriore bonus è che se hai un messaggio di convalida più lungo, si avvolgerà nello stesso spazio della tua casella di testo.

Answer 2

mi piacerebbe aggiungere una classe per il vostro testo:

@Html.TextBoxFor(model => model.Name, new { @class = "form-control long-textbox" }) 

poi lo stile è nel CSS:

.long-textbox{ 
    width:300px; 
} 

È possibile utilizzare l'attributo di dimensione, ma sento che questo è più di un cosa stilistica e dovrebbe essere gestita in CSS.

Answer 3

In Bootstrap 3, la classe form-control imposta gli elementi input al 100% del contenitore.

In alternativa è possibile applicare manualmente il proprio stile:

@Html.TextBoxFor(model => model.Name, new { @class = "wide-control" }) 

Con i CSS in questo modo:

input.wide-control { 
    width: 300px; 
} 

Answer 4

Tutte le risposte sono state utili.

mio sollution era quello di cambiare il max-width di default nel mio css causa che ha limitato la dimensione

input, select, textarea { 
    max-width: 500px; 
} 

quindi cambiare i col-MD- * di classe ha funzionato bene.

grazie

Answer 5

Utilizzare la proprietà "Dimensione" HTML INPUT.

Esempio:

@Html.TextBoxFor(model => model.Name, new { @class = "form-control", size="15" }) 
@Html.TextBoxFor(model => model.Other, new { @class = "form-control", size="25" }) 

Answer 6

Si potrebbe utilizzare una casella di testo e utilizzare l'attributo di stile insieme alla nuova parola chiave Come mostra l'esempio di seguito

@Html.TextBoxFor(model => model.Detail, new { style = "width:600px" }) 

Può essere utilizzato anche per LabelFor

@Html.LabelFor(model => model.Detail, "Detail", new { @class = "control-label col-md-4", style = "width:160px" }) 

Answer 7

Io provo sempre a stare lontano da c appendendo le dimensioni, lascio che le cose riempiano lo spazio e usino il sistema della griglia.

Questo aiuta a funzionare su tutte le dimensioni dello schermo.

Grazie

http://plnkr.co/edit/2ZczWMsNk9arscbY26j8?p=preview

<div class="form-horizontal"> 
    <div class="form-group"> 
    <label class="control-label col-md-2">Wide</label> 
    <div class="col-md-10"> 
     <input class="**form-control**" type="TextBox"/> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label class="control-label col-md-2">Not as Wide</label> 
    <div class="col-md-8"> 
     <input class="form-control" type="TextBox"/> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label class="control-label col-md-2">Narrow</label> 
    <div class="col-md-6"> 
     <input class="form-control" type="TextBox"/> 
    </div> 
    </div> 

    <div class="form-group"> 
    <div class="col-md-offset-2 col-md-10"> 
     <input type="submit" value="Create" class="btn btn-default" /> 
    </div> 
    </div> 
</div> 

Answer 8

solito il tag ha un insieme di campo max-width. Se lo modifichi come

text { 
    max-width: 100%; 
    width: 100%; 
} 

quindi è possibile ottenere l'intera larghezza disponibile. Se lo stai facendo per più risoluzioni del dispositivo, allora sarebbe meglio usare la larghezza percentuale invece di usare la larghezza fissa in px. Spero che questo ti aiuti.