XPages

Question

我正在尝试使用在最新扩展库中找到的 Boostrap 主题做一个小型 "Search: [field] [button]" 类型的“搜索栏，但我想我遗漏了一些东西，因为所有控件都显示在彼此之上在不同的线路上，而不是在一条线路上。

我还不熟悉 Bootstrap（用它做电话簿作为第一个应用程序，因此有搜索功能），而且我无法按照我所阅读的各种帖子的要求使用它到目前为止，当他们向 "form" 元素添加样式时...

这是我的代码，它使标签出现在顶部，然后是后续行的字段，然后是另一行的按钮：

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

我错过了什么？我没有使用表单 table 布局，如您所见：尝试过但没有按我的意愿工作...我什至尝试过 "display:inline"，但没有成功。

谢谢

Answer 1

我刚刚编写了一些快速而肮脏的代码，所有内容都显示在一行上，只有在调整较小的浏览器大小时才开始拖放到多行上 window。

不过，我正在使用一些实际的 bootstrap 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>

XPages - Bootstrap：在一行上对齐字段

XPages - Bootstrap: aligning fields on one line

xpages-extlib