Question

我正在使用Domino 9.0.1，并且设法正确安装了Bootstrap Library 1.0.0.201403171254。

我现在正在尝试为我的应用程序使用Bootstrap表单（一个非常简单的CRUD，带有编辑和删除功能）。我使用Bootstrap4XPages-Demos数据库中'form'XPage的代码启发自己。

据我所知，有一些控件已被'bootstrapified'和其他一些你必须用你正在寻找的bootstrap类的div包围你的Xpages标签 - 我不知道在哪里这是记录在案的（如果有的话）。

我现在遇到的问题是我的'形式'在阅读模式下不能很好地对齐

enter image description here

但在编辑模式下

enter image description here

是否有一个属性我没有设置正确（我已经发布了下面的部分代码）或Bootstrap4Xpages从未设计过这一点（即我将不得不为'read'模式做标记的单独版本和'编辑'模式）？

我也怀疑我陷入了我的Notes客户端开发思维模式，即读取模式，编辑模式，以及UI的旧想法，所以如果你有更好的选择，请告诉我！

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.data>
    <xp:dominoDocument
        var="document1"
        formName="Kurs"
        computeWithForm="onsave">
    </xp:dominoDocument>
</xp:this.data>
<div
    class="row">
    <div class="form-horizontal">

        <div class="form-group">
            <xp:label
                value="Titel:"
                id="label1"
                for="titel1"
                styleClass="control-label col-sm-2">
            </xp:label>
            <div
                class="col-sm-10">
                <xp:inputText
                    value="#{document1.Titel}"
                    id="inputText1"
                    required="true">
                    <xp:this.validators>
                        <xp:validateRequired
                            message="Geben Sie bitte einen Titel ein"></xp:validateRequired>
                    </xp:this.validators>
                </xp:inputText>
            </div>
        </div>

这是读取模式下的标记：

<div class="form-group">
    <label id="view:_id1:_id2:_id5:label1" for="view:_id1:_id2:_id5:titel1" class="control-label col-sm-2">Titel:</label>
    <div class="col-sm-10">
        <span id="view:_id1:_id2:_id5:inputText1">Thailändische Küche 1</span>
    </div>
</div>

和编辑模式中的标记：

<div class="form-group">
    <label id="view:_id1:_id2:_id5:label1" for="view:_id1:_id2:_id5:titel1" class="control-label col-sm-2">Titel:</label>
    <div class="col-sm-10">
        <input type="text" value="Thailändische Küche 1" id="view:_id1:_id2:_id5:inputText1" name="view:_id1:_id2:_id5:inputText1" aria-required="true" class="form-control">
    </div>
</div>

Answer 1

Bootstrap表单是IMHO，不打算在表单控件旁边有标签，但在上面。因此，如果你想用col-sm- *类来布局它们，我建议你用div或甚至表格将它们包装在div中。另外，请确保使用正确的类别，例如桌面应用。 col-sm- *类适用于小分辨率。添加col-lg- *类以及它们是为更高分辨率设计的。顺便说一句：要解决这个看起来像废话的富文本编辑器的问题，请看一下：

http://mardou.dyndns.org/hp.nsf/blogpost.xsp?documentId=BC2

或其他任何“bootstrap”-ed http://mardou.dyndns.org/hp.nsf/search.xsp?query=bootstrap

Answer 2

如果查看Bootstrap文档，可以在http://getbootstrap.com/css/#forms-controls-static部分找到适合您需要的类。当文档处于读取模式时，该字段需要具有＆＃34; form-control-static＆＃34;上课，最好添加到＆＃34; p＆＃34;标签（通常，在读取模式下输入控件不会输出，但如果它不起作用，您可以根据输入调整它。）

或者，您可以通过查看标记来添加自己的样式，如Oliver建议的那样，并通过调整相关类的对齐方式或在标签中添加padding-top来修改CSS。

另外两个建议（我确定还有更多）是将处于读取模式的字段显示为已禁用，这仍将生成输入标记并应保持水平形式的样式。或者，您可以在不使用Bootstrap表单标记的情况下设置读取表单的样式，并通过对话框界面编辑内容。

Bootstrap4Xpages表单：“读取模式”中的布局未对齐

2 个答案: