Bootstrap 3: il gruppo di input nel modulo di navigazione occupa l’intera larghezza

Ecco come appare la barra di navigazione di bootstrap.

L’HTML predefinito è:

 

Ma voglio unire l’input e il pulsante insieme come un input-group . Tuttavia, quando provo a racchiudere l’input e il pulsante attorno a un input-group , finisce per occupare l’intera larghezza:

inserisci la descrizione dell'immagine qui

HTML:

  

Ho letto alcune soluzioni per questo , ma voglio evitare di usare hack come style: "width: 200px;"

Qualche soluzione? Grazie mille in anticipo.

Ho pensato a un modo minimo per risolvere questo problema senza modificare la struttura predefinita del modulo di barra di navigazione utilizzato nella documentazione di Bootstrap.

Aggiungi class navbar-input-group al modulo

  

CSS (inserire nella query multimediale se necessario):

 .navbar-input-group { font-size: 0px; /*removes whitespace between button and input*/ } .navbar-input-group input { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .navbar-input-group .btn { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left: 0px; } 

o SCSS (mantiene intatta la reattività):

 @import "bootstrap-variables"; .navbar-input-group { @media (min-width: $screen-sm) { font-size: 0px; /*removes whitespace between button and input*/ input { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .btn { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left: 0px; } } @media (max-width: $screen-xs-max) { margin-top:0px; margin-bottom:0px; .btn { width:100%; } } } 

Risultato:

inserisci la descrizione dell'immagine qui

Ai fini della chiarezza, sto prendendo di mira elementi discendenti nel CSS. Questo non è il modo più efficace per scegliere come target elementi CSS. Se ti piace questa risposta, considera la possibilità di assegnare input e pulsanti ai nomi di classi univoci e selezionarli come target senza selettori discendenti nel tuo CSS (leggi: http://csswizardry.com/2011/09/writing-efficient-css-selectors/ )

Il fatto che la tua soluzione occupi l’intera larghezza è una buona cosa. Ora utilizza righe e colonne annidate per definire la quantità di spazio che desideri effettivamente consumare dalla barra di ricerca.

 

Modifica: non ho notato OP chiesto una soluzione senza impostare manualmente la larghezza in css. Comunque, penso che questa sia una buona alternativa se non ti interessa la larghezza massima. E imposta solo la larghezza massima per le risoluzioni elevate, in modo da mantenere il comportamento normale su tablet e dispositivi mobili.

1) Aggiungi navbar-searchbox su div.input-group:

  

2) Metti questo nel tuo file .lass.

 @media (min-width: @screen-sm-min) { .navbar-searchbox { max-width: 250px; } } 

3) Salta per la stanza gridando vittoria!

Non è necessario utilizzare le righe e sì, questo è tutto il CSS che ti serve. Funziona, provalo.

Preferisco trattare l’elemento del modulo normalmente, e ho corretto la sua apperance usando questa regola CSS:

 .navbar-form .input-group { display: inline-block; width: auto; vertical-align: middle; .form-control, .input-group-btn { float: left; } }