XPages - Bootstrap: Felder auf einer Zeile ausrichten

Question

Ich versuche, eine kleine "Suche: [Feld] [Schaltfläche]" Art von "Suchleiste mit dem Boostrap-Thema in der neuesten Extension-Bibliothek zu finden, aber ich denke, ich bin etwas fehlt, da alle Steuerelemente in verschiedenen Zeilen übereinander liegen und nicht auf einem einzigen.

Ich bin noch nicht vertraut mit Bootstrap (macht ein Telefonbuch damit als erste App, daher die Suchfunktion), und Ich konnte es mit den verschiedenen Posts, die ich bis jetzt gelesen habe, nicht arbeiten, da sie dem "Formular" -Element Stil verleihen ...

Hier ist der Code, den ich habe, der das Label erscheinen lässt oben, dann das Feld in einer nachfolgenden Zeile, dann die Schaltfläche in einer anderen Zeile :

<xp:panel style="width:400px" > 
    <xp:label value="Recherche :" id="label2" xp:key="label" style="font-weight:bold" styleClass="form-control-static"> 
    </xp:label> 
    <xp:inputText id="searchFor" 
     value="#{sessionScope.searchFor}" styleClass="form-control-static"> 
     <xp:eventHandler event="onkeypress" submit="true" 
      refreshMode="partial" refreshId="PanelMain"> 
     </xp:eventHandler> 
    </xp:inputText> 
    <xp:button value="Reset" id="button1" 
      styleClass="btn btn-primary form-control-static"> 
      <xp:eventHandler event="onclick" submit="true" 
       refreshMode="partial" refreshId="PanelMain"> 
       <xp:this.action><![CDATA[#{javascript:sessionScope.searchFor = null;}]]></xp:this.action> 
      </xp:eventHandler> 
    </xp:button> 
</xp:panel> 

Was vermisse ich? Ich verwende kein Formular-Tabellen-Layout, wie Sie sehen können: probierte es aus und es funktionierte nicht wie ich wollte ... Ich habe sogar "display: inline" versucht, ohne Erfolg.

Dank

Answer 1

Einig schneller und schmutziger Code Ich klopfte nur auf und alles zeigt auf einer Linie und startet nur auf mehrere Zeilen fallen, wenn ein kleines Browser-Fenster Größe ändern.

ich aber einige aktuelle Bootstrap HTML verwende, meine eigene Reihe und Gitter aufzubauen ....

<!-- ROW 1 --> 
<div class="row"> 
<div class="col-lg-4"> 
    <div class="form-group"> 
     <label for="edtName">Name:</label> 
     <xp:inputText id="edtName"> 
      <xp:this.attrs> 
       <xp:attr name="placeholder" value="Name"></xp:attr> 
      </xp:this.attrs> 
     </xp:inputText> 
    </div> 
</div> 

<div class="col-lg-2"> 
<xp:button value="Search" id="btnSearch" styleClass="btn btn-success btn- block btn-tall"> 

<xp:eventHandler event="onclick" submit="true" refreshMode="partial" 
    refreshId="divReset"> 
<xp:this.action><![CDATA[#{javascript: 
var strName:string = getComponent("edtName").getValue(); 
viewScope.searchString = strName 
}]]></xp:this.action> 
</xp:eventHandler></xp:button> 
</div> 
</div>