XPages - Bootstrap: aligner des champs sur une ligne

Question

J'essaye de faire un petit "Search: [field] [button]" type de "barre de recherche avec le thème Boostrap trouvé dans la dernière bibliothèque Extension, mais je suppose que je suis manque quelque chose, car tous les contrôles apparaissent les uns sur les autres sur des lignes différentes et pas sur un seul

Je ne suis pas encore familier avec Bootstrap (faire un répertoire avec elle comme première application, d'où la fonction de recherche), et Je ne pouvais pas le faire fonctionner comme je le veux avec les différents articles que j'ai lus jusqu'ici, car ils ajoutent du style à l'élément "forme" ...

Voici le code que j'ai, qui fait apparaître l'étiquette sur haut, puis le champ sur une ligne suivante, puis le bouton sur une autre ligne :

<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> 

Que manque-t-il? Je n'utilise pas une mise en page de tableau de forme, comme vous pouvez le voir: essayé et ça n'a pas fonctionné comme je le voulais ... J'ai même essayé "display: inline", sans succès.

Merci

Answer 1

Une partie du code rapide et sale que je viens en cloque et tout se affiche sur une ligne et ne commence tomber sur plusieurs lignes lors du redimensionnement d'une petite fenêtre du navigateur.

Je suis cependant en utilisant du HTML bootstrap réelle pour construire ma propre ligne et grille ....

<!-- 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>