Question

我正在尝试使用最新扩展库中找到的带有Boostrap主题的“搜索：[字段] [按钮]”类型的“搜索栏”，但我想我错过了一些内容，因为所有控件都显示在顶部彼此在不同的线上，而不是在一个线上。

我还不熟悉Bootstrap（使用它作为第一个应用程序进行电话簿，因此搜索功能），我无法按照我想要的方式使用到目前为止我读过的各种帖子，因为它们添加了风格到“形式”元素......

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

<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

一些快速而又脏的代码我刚刚敲了一下，所有内容都显示在一行上，只在调整较小的浏览器窗口时才开始掉到多行上。

然而，我正在使用一些实际的引导程序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：在一行

1 个答案: