Larghezza di input su Bootstrap 3

Aggiorna di nuovo: sto chiudendo questa domanda selezionando la risposta migliore per impedire alle persone di aggiungere risposte senza capire veramente la domanda. In realtà non c'è modo di farlo con la funzionalità build in senza usare la griglia o aggiungere extra CSS. Le griglie non funzionano bene se hai a che fare con help-blockelementi che devono andare oltre un breve input, ad esempio, ma sono "integrati". Se questo è un problema, ti consiglio di utilizzare ulteriori classi CSS che puoi trovare nella discussione su BS3 qui . Ora che BS4 è uscito, è possibile utilizzare gli stili di dimensionamento inclusi per gestirlo, quindi questo non sarà rilevante per molto più tempo. Grazie a tutti per il buon contributo su questa popolare domanda SO.

Aggiornamento: Questa domanda rimane aperta perché riguarda incorporata funzionalità BS per gestire la larghezza di ingresso senza ricorrere a griglia (a volte devono essere gestite in modo indipendente). Uso già le classi personalizzate per gestire questo, quindi questo non è un how-to su css di base. L'attività è nella lista di discussione delle funzioni BS e deve ancora essere affrontata.

Domanda originale: Qualcuno ha trovato un modo per gestire la larghezza di input su BS 3? Attualmente sto usando alcune classi personalizzate per aggiungere quella funzionalità ma potrei aver perso alcune opzioni non documentate.

I documenti attuali dicono di usare .col-lg-x ma questo chiaramente non funziona in quanto può essere applicato solo al div contenitore che quindi causa tutti i tipi di problemi di layout / float.

Ecco un violino. Strano è che sul violino non riesco nemmeno a ridimensionare il gruppo di moduli.

http://jsfiddle.net/tX3ae/

<form role="form" class="row">
    <div class="form-group col-lg-1">
        <label for="code">Name</label>
        <input type="text" class="form-control">
    </div>

    <div class="form-group col-lg-1 ">
        <label for="code">Email</label>
        <input type="text" class="form-control input-normal">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

Quello che vuoi fare è certamente realizzabile.

Quello che vuoi è avvolgere ogni 'gruppo' in una riga, non l'intero modulo con una sola riga. Qui:

<div class="container">
    <h1>My form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1 ">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal" />
            </div>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div>

Il NUOVO jsfiddle che ho creato: NUOVO jsfiddle

Nota che nel nuovo violino ho anche aggiunto 'col-xs-5' così puoi vederlo anche su schermi più piccoli - rimuoverli non fa differenza. Ma tieni presente nelle tue lezioni originali, stai solo usando 'col-lg-1'. Ciò significa che se la larghezza dello schermo è inferiore alla dimensione della query media "lg", viene utilizzato il comportamento di blocco predefinito. Fondamentalmente applicando solo 'col-lg-1', la logica che stai impiegando è:

IF SCREEN WIDTH < 'lg' (1200px by default)

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

   APPLY 'col-lg-1' (~95px)

Vedi Bootstrap 3 grid system per maggiori informazioni. Spero di essere stato chiaro, altrimenti fammi sapere e vorrei elaborare.

In Bootstrap 3

Puoi semplicemente creare uno stile personalizzato:

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
}

Quindi aggiungilo ai controlli del modulo in questo modo:

<div class="controls">
    <select id="expirymonth" class="form-control form-control-inline">
        <option value="01">01 - January</option>
        <option value="02">02 - February</option>
        <option value="03">03 - March</option>
        <option value="12">12 - December</option>
    </select>
    <select id="expiryyear" class="form-control form-control-inline">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
    </select>
</div>

In questo modo non devi aggiungere markup extra per il layout nel tuo HTML.

ASP.net MVC vai su Content- Site.css e rimuovi o commenta questa riga:

input,
select,
textarea {
    /*max-width: 280px;*/
}

Penso che devi avvolgere gli input all'interno di a col-lg-4, quindi all'interno di form-groupe tutto diventa contenuto in un form-horizontal..

    <form class="form form-horizontal">
         <div class="form-group">
           <div class="col-md-3">
            <label>Email</label>
            <input type="email" class="form-control" id="email" placeholder="email">
           </div>
         </div>
         ...
     </form>

Demo su Bootply - http://bootply.com/78156

EDIT: dai documenti Bootstrap 3 ..

Input, selezioni e textarea sono larghi al 100% per impostazione predefinita in Bootstrap. Per utilizzare il modulo incorporato, dovrai impostare una larghezza sui controlli del modulo utilizzati all'interno.

Quindi un'altra opzione è impostare una larghezza specifica usando CSS:

.form-control {
    width:100px;
}

Oppure, applica il col-sm-*al `gruppo-modulo '.

I documenti attuali dicono di usare .col-xs-x, no lg. Poi provo a suonare il violino e sembra funzionare:

http://jsfiddle.net/tX3ae/225/

per mantenere il layout forse puoi cambiare dove metti la classe "riga" in questo modo:

<div class="container">
  <h1>My form</h1>
  <p>How to make these input fields small and retain the layout.</p>
  <div class="row">
    <form role="form" class="col-xs-3">

      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" name="name" >
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" name="email">
      </div>

      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>

http://jsfiddle.net/tX3ae/226/

<div class="form-group col-lg-4">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>

Aggiungi la classe al form.group per vincolare gli input

Se si utilizza il modello Master.Site in Visual Studio 15, il progetto di base ha "Site.css" che sostituisce la larghezza dei campi di controllo del modulo.

Non sono riuscito a ottenere una larghezza delle caselle di testo più ampia di circa 300 pixel. Ho provato TUTTO e niente ha funzionato. Ho scoperto che esiste un'impostazione in Site.css che stava causando il problema.

Sbarazzati di questo e puoi ottenere il controllo sulla larghezza del campo.

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

So che si tratta di un vecchio thread, ma ho riscontrato lo stesso problema con un modulo in linea e nessuna delle opzioni sopra ha risolto il problema. Quindi ho corretto il mio modulo inline in questo modo: -

<form class="form-inline" action="" method="post" accept-charset="UTF-8">
    <div class="row">
        <div class="form-group col-xs-7" style="padding-right: 0;">
            <label class="sr-only" for="term">Search</label>
            <input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
            <span class="help-block">0 results</span>
        </div>
        <div class="form-group col-xs-2">
            <button type="submit" name="search" class="btn btn-success" id="search">Search</button>
        </div>
    </div>
</form>

Questa era la mia soluzione. Un po 'hacky hack, ma ha fatto il lavoro per un modulo in linea.

È possibile aggiungere l'attributo di stile oppure è possibile aggiungere una definizione per il tag di input in un file CSS.

Opzione 1: aggiunta dell'attributo di stile

<input type="text" class="form-control" id="ex1" style="width: 100px;">

Opzione 2: definizione in css

input{
  width: 100px
}

Puoi modificare 100px in auto

Spero di poterti aiutare.

In Bootstrap 3

Tutti gli elementi testuali <input>, <textarea> e <select> con .form-control sono impostati su larghezza: 100%; per impostazione predefinita.

http://getbootstrap.com/css/#forms-example

Sembra, in alcuni casi, che dobbiamo impostare manualmente la larghezza massima che vogliamo per gli input.

Ad ogni modo, il tuo esempio funziona. Basta controllarlo con un grande schermo, in modo da poter vedere il nome e i campi e-mail stanno ottenendo il 2/12 del con (col-lg-1 + col-lg-1 e hai 12 colonne). Ma se hai uno schermo più piccolo (ridimensiona il browser), gli input si espandono fino alla fine della riga.

Non devi rinunciare al semplice css :)

.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">

Se stai cercando di ridurre o aumentare semplicemente la larghezza degli elementi di input di Bootstrap a tuo piacimento, lo userei max-width nel CSS.

Ecco un esempio molto semplice che ho creato:

    <form style="max-width:500px">

    <div class="form-group"> 
    <input type="text" class="form-control" id="name" placeholder="Name">
    </div>

    <div class="form-group">
    <input type="email" class="form-control" id="email" placeholder="Email Address">
    </div>

    <div class="form-group">
    <textarea class="form-control" rows="5" placeholder="Message"></textarea>
    </div>   

    <button type="submit" class="btn btn-primary">Submit</button>
    </form>

Ho impostato la larghezza massima dell'intero modulo su 500 px. In questo modo non sarà necessario utilizzare alcun sistema di griglia di Bootstrap e manterrà il modulo reattivo.

Sono anche alle prese con lo stesso problema, e questa è la mia soluzione.

Sorgente HTML

<div class="input_width">
    <input type="text" class="form-control input-lg" placeholder="sample">
</div>

Coprire il codice di input con un'altra classe div

Fonte CSS

.input_width{
   width: 450px;
}

dare qualsiasi impostazione di larghezza o margine sulla classe div coperta.

La larghezza di input di Bootstrap è sempre predefinita come 100%, quindi la larghezza è seguita da quella coperta.

Questo non è il modo migliore, ma la soluzione più semplice e unica in cui ho risolto il problema.

Spero che questo abbia aiutato.

Non so perché tutti abbiano trascurato il file site.css nella cartella Contenuto. Guarda la riga 22 in questo file e vedrai le impostazioni per l'input da controllare. Sembrerebbe che il tuo sito non faccia riferimento a questo foglio di stile.

Ho aggiunto questo:

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

al tuo violino e funziona benissimo.

Non dovresti mai aggiornare bootstrap.css o bootstrap.min.css. In questo modo ti imposterai a fallire quando viene aggiornato bootstrap. Ecco perché è incluso il file site.css. È qui che puoi apportare modifiche al sito che ti forniranno comunque il design reattivo che stai cercando.

Ecco il violino che funziona

Aggiungi e definisci termini per il style=""campo di input, questo è il modo più semplice per farlo: Esempio:

<form>
    <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" style="width:200px;">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" style="width:200px">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Bootstrap utilizza la classe "form-input" per controllare gli attributi di "campi di input". Aggiungi semplicemente la tua classe di "input-form" con la larghezza, il bordo, la dimensione del testo, ecc. Desiderati nel tuo file css o nella sezione head.

(oppure, aggiungi direttamente il codice inline size = '5' negli attributi di input nella sezione body.)

<script async src="//jsfiddle.net/tX3ae/embed/"></script> 

Bootstrap 3 Ho ottenuto un bel layout di modulo reattivo usando il seguente:

<div class="row">
    <div class="form-group  col-sm-4">
        <label for=""> Date</label>
        <input type="date" class="form-control" id="date" name="date" placeholder=" date">
    </div>

    <div class="form-group  col-sm-4">
        <label for="hours">Hours</label>
        <input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
    </div>
</div>