Bootstrap 3.0: come avere testo e input sulla stessa riga?

Al momento sto passando il mio sito Web a Bootstrap 3.0. Ho un problema con l'input del modulo e la formattazione del testo. Ciò che ha funzionato in Bootstrap 2 non funziona in Bootstrap 3.

Come posso inserire del testo sulla stessa riga prima e dopo l'immissione di un modulo? L'ho ristretto a un problema con la classe "form-control" nella versione Bootstrap 3 dell'esempio.

Come dovrei fare per ottenere tutto il testo e l'input su una riga? Vorrei che l'esempio bootstrap 3 assomigliasse all'esempio bootstrap 2 nel jsfiddle.

Esempio di violino JS

<div class="container ">
  <form>
      <h3> Format used to look like this in Bootstrap 2 </h3>
      <div class="row ">
          <label for="return1"><b>Return:</b></label>
          <input id="return1" name='return1' class=" input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return1' style='color:blue'> +/- 14 Days</span>
      </div>

       <br>   
       <br>   
           <h3> BootStrap 3 Version </h3>

      <div class="row">
          <label for="return2"><b>Return:</b></label>
          <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return2' style='color:blue'> +/- 14 Days</span>
      </div>
  </form>

Aggiornamento: cambio il codice in questo che funziona ma ora ho problemi con l'allineamento. Qualche idea?

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

Metterei ogni elemento che desideri in linea all'interno di un div col-md- * separato all'interno della tua riga. O forza la visualizzazione in linea dei tuoi elementi. La classe form-control mostra block perché è così che bootstrap pensa che dovrebbe essere fatto.

Direttamente dalla documentazione http://getbootstrap.com/css/#forms-horizontal .

Usa le classi griglia predefinite di Bootstrap per allineare etichette e gruppi di controlli del modulo in un layout orizzontale aggiungendo .form-horizontalal modulo (che non deve essere un <form>). In questo modo cambia .form-groupsper comportarsi come righe della griglia, quindi non è necessario .row.

Campione:

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Ciò di cui hai bisogno è la .form-inlineclasse. Devi stare attento però, con la nuova .form.inlineclasse devi specificare la larghezza per ogni controllo.

Dai un'occhiata a questo

Nessuno di questi ha funzionato per me, ho dovuto usare la .form-control-staticclasse.

http://getbootstrap.com/css/#forms-controls-static

Puoi farlo in questo modo:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="input" placeholder="Input text">
        </div>
    </div>
</form>

Violino

basta dare alla madre di div "class =" col-lg-12 ""

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

sarà

<div class="form-group">
<div class="col-lg-12">
  <div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
</div>
</div>

Il modo in cui l'ho risolto è stato semplicemente aggiungere un override per tutte le mie caselle di testo sul css principale del mio sito, in questo modo:

.form-control {
    display:initial !important;
}

tutti si prega di controllare il codice aggiornato come dobbiamo usare

 form-control-static not only form-control

http://jsfiddle.net/tusharD/58LCQ/34/

grazie per i saluti

In Bootstrap 4 per elemento orizzontale puoi utilizzare .rowcon le .col-*-*classi per specificare la larghezza delle etichette e dei controlli. vedere questo collegamento .

E se vuoi visualizzare una serie di etichette, controlli del modulo e pulsanti su una singola riga orizzontale puoi usare .form-inlineper maggiori informazioni questo link

Oppure puoi farlo:

<table>
  <tr>
    <td><b>Return:</b></td>
    <td><input id="return1" name='return1' 
              class=" input input-sm" style="width:150px"
              type="text" value='8/28/2013'></td>
  </tr>
</table>

Ho provato tutti i suggerimenti di cui sopra e nessuno di loro ha funzionato. Non voglio scegliere un numero fisso di colonne nella griglia di 12 colonne. Voglio il prompt e l'input subito dopo e voglio che le colonne si estendano secondo necessità.

Sì, lo so, questo è contro ciò che riguarda il bootstrap. E non dovresti MAI usare un tavolo. Perché DIV è molto meglio dei tavoli. Ma il problema è che tabelle, righe e celle effettivamente FUNZIONANO.

SÌ - LO SO DAVVERO che ci sono fanatici CSS, e la reazione istintiva non è mai mai mai usare TABLE, TR e TD. Sì, so che DIV class = "table" con DIV class = "row" e DIV class = "cell" è molto molto meglio. Tranne quando non funziona e ci sono molti casi. Non credo che le persone dovrebbero ignorare ciecamente queste situazioni. Ci sono volte in cui TABLE / TR / TD funzionerà bene, e non c'è motivo di usare un approccio più complicato e più fragile solo perché è considerato più elegante. Uno sviluppatore dovrebbe capire quali sono i vantaggi dei vari approcci, i compromessi e non esiste una regola assoluta che i DIV siano migliori.

"Caso in questione - in base a questa discussione ho convertito alcuni tds e trs esistenti in div. 45 minuti di scherzo cercando di allineare tutto l'uno accanto all'altro e ho rinunciato. TD torna in 10 secondi dopo - funziona - subito - su tutti i browser, niente più da fare. Per favore cerca di farmi capire - quale possibile giustificazione hai per volere che lo faccia in altro modo! " Vedi [ https://stackoverflow.com/a/4278073/1758051]

E questo: "

Il layout dovrebbe essere facile. Il fatto che ci siano articoli scritti su come ottenere un layout dinamico a tre colonne con intestazione e piè di pagina in CSS mostra che si tratta di un sistema di layout scadente. Ovviamente puoi farlo funzionare, ma ci sono letteralmente centinaia di articoli online su come farlo. Non ci sono praticamente articoli di questo tipo per un layout simile con le tabelle perché è palesemente ovvio. Non importa quello che dici contro le tabelle ea favore dei CSS, questo fatto annulla tutto: un layout di base a tre colonne in CSS è spesso chiamato "Il Sacro Graal". "[ Https://stackoverflow.com/a/4964107/ 1758051]

Devo ancora vedere un modo per forzare i DIV ad allinearsi sempre in una colonna in tutte le situazioni. Continuo a ricevere esempi banali che non si imbattono nei problemi. "Reattivo" significa fornire un modo in cui non si allineeranno sempre in una colonna. Tuttavia, se vuoi davvero una colonna, puoi sprecare ore cercando di far funzionare DIV. A volte, è necessario utilizzare la tecnologia appropriata, indipendentemente da ciò che dicono i fanatici.