XPages - ブートストラップ：フィールドを1行に整列する

Question

私は小さな「検索：[フィールド] [ボタン]」タイプの「Boostrapテーマの検索バーを最新の拡張ライブラリで見つけようとしていますが、

私はまだブートストラップ（最初のアプリとして電話帳をやっているので、検索機能）に精通していませんし、また、いくつかのコントロールが別の行に表示されています。これまでに読んださまざまな投稿で、「フォーム」要素にスタイルを追加したいので、私はそれを得ることができませんでした...

ここには、ラベルが表示されるコードがありますtop、その後の行のフィールド、次に別の行のボタン：

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

何が紛れていますか？あなたが見ることができるように私はフォームテーブルレイアウトを使用していません：それを試して、それが私が望むように動作しませんでした...私は "表示：インライン"、成功なしで試みました。

おかげ

Answer 1

いくつかの迅速かつ汚い私はちょうどノックコードと1行上のすべてのものが表示され、唯一の小さなブラウザウィンドウのサイズを変更する際、複数行に落下を開始します。私はしかし、私自身の行やグリッドを構築するために、いくつかの実際のブートストラップHTMLを使用しています

....

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