Bootstrap, Multi-Field-Suchleiste

Ich entwerfe eine mehrfach eingereichte Suchleiste für eine neue Website. Die Website ist in PHP/Javascript/BootstrapBootstrap, Multi-Field-Suchleiste

Ich brauche vier Felder zu schaffen gemacht (3 Textfeld + 1 Suchtaste), und sie sollten in einem

<div class="row"> 
    <div class="col-lg-8 col-lg-offset-2"> 
     ..here the fields plus button... 
    </div> 
</div>

Wie kann ich das tue ausgerichtet werden? Ich habe versucht, form inline aber das ist das Ergebnis:

Quelle

2016-04-08 Gianluca Ghettini

'float: left' an den Eingängen und die Taste? – IrkenInvader

Dies wird die Elemente zwingen, den ganzen Raum zu nehmen? Was, wenn ich möchte, dass der Knopf kürzer ist? –

Dadurch werden die Elemente nicht den gesamten Platz einnehmen, sie werden in einer Zeile angezeigt. Sie können ihre css 'width' Eigenschaft anpassen (geben Sie vielleicht die Eingaben 30% Breite und die Schaltfläche 10%) – IrkenInvader

Wenn Sie keine besonders problematischen Anforderungen wie alte Browserunterstützung haben, könnten Sie Spaß mit Flex haben.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Quelle

2016-04-08 19:59:53 theCodeSurgeon

Sie haben bis 12 cols zu verteilen und zu zentrieren Ihre div wie:

ändern Sie Ihren Code:

<div class="row"> 
    <div class="col-lg-8 col-lg-offset-2"> 
     ..here the fields plus button... 
    </div> 
</div>

für:

<!--Adding some styles for center the row--> 
<div class="row" style="margin: 0 auto; display:block; width: 100%;"> 
    <div class="col-lg-2">Field One</div> 
    <div class="col-lg-2">Field Two</div> 
    <div class="col-lg-2">Field Tree</div> 
    <div class="col-lg-6">Your search field</div> 
</div>

Bitte beachten Sie dies für: http://getbootstrap.com/css/#grid mehr darüber.

Quelle

2016-04-08 16:40:02

Bootstrap, Multi-Field-Suchleiste

Antwort

Verwandte Themen