Twitter bootstrap 3 Xpages和引导-寻呼机未对齐

我的寻呼机在Xpages视图中无法正确对齐。左边和右边的空白表格单元格都很大。

如有任何帮助，将不胜感激：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <div
        class="panel panel-default">
        <!-- Default panel contents -->
        <div
            class="panel-heading">Panel heading</div>
        <xp:viewPanel
            rows="30"
            id="viewPanel1"
            viewStyleClass="table"
            var="rowData">
            <xp:this.facets>
                <xp:pager
                    partialRefresh="true"
                    layout="Previous Group Next"
                    xp:key="headerPager"
                    id="pager1" />
            </xp:this.facets>
            <xp:this.data>
                <xp:dominoView
                    var="view1"
                    viewName="(PC)" />
            </xp:this.data>
            <xp:viewColumn
                id="viewColumn1">
                <xp:this.value><![CDATA[#{javascript:""}]]></xp:this.value>
                <xp:link
                    escape="true"
                    id="link1"
                    value="">
                    <xp:this.text><![CDATA[#{javascript:rowData.getColumnValue("serialNumber");}]]></xp:this.text>
                    <xp:eventHandler
                        event="onclick"
                        submit="true"
                        refreshMode="complete">
                        <xp:this.action>
                            <xp:openPage
                                name="/xpPCForm.xsp"
                                target="openDocument">
                                <xp:this.documentId><![CDATA[#{javascript:rowData.getDocument().getUniversalID()}]]></xp:this.documentId>
                            </xp:openPage>
                        </xp:this.action>
                    </xp:eventHandler>
                </xp:link>
                <xp:viewColumnHeader
                    id="viewColumnHeader1"
                    sortable="true"
                    value="Serial Number" />
            </xp:viewColumn>
        </xp:viewPanel>
    </div>
</xp:view>

小组标题

=============================================================

我仍然得到一个我不想要的空间。不可怕，但我不喜欢不知道为什么会发生这样的事情

正如你所看到的，寻呼机的左边有一个空格。它是一个表列。我尝试了布赖恩的建议，并使用了其他几个方面，但这也不起作用。如果我把寻呼机放在西北方向，那么表格的第一列就非常宽

Oliver的建议缩小了顶部和底部的边距（因此更靠近按钮，更接近视图的开头，但左栏不变）

只是对它为什么这样做感到困惑

---

通常我会在CSS中添加以下内容：

.pagination {
    margin: 0;
}

---

虽然我从未见过这么大的空间…

您应该在视图面板上为寻呼机使用不同的方面。Sven Hasselbach有一篇很好的博客文章，解释了各种viewPnael方面的布局：。这些额外的方面解释了为什么在firebug中可以看到空表单元格

因此，您可以尝试使用North或Northwest镶嵌面，而不是HeaderPage镶嵌面：

<xp:this.facets>
    <xp:pager
        partialRefresh="true"
        layout="Previous Group Next"
        xp:key="north"
        id="pager1" />
</xp:this.facets>

或重新设置寻呼机的样式以改变其位置：

<xe:pagerSizes id="pagerSizes1" 
               xp:key="headerPager"
               style="left:-20px;position:relative;">
</xe:pagerSizes>

---

在这两种情况下，增加奥利弗建议的保证金变动也有帮助。

奥利弗，我尝试了一下，但由于某种原因，它对我不起作用。我使用FireBug Lite进行了检查，寻呼机的容器是一个包含三个单元格的表。第一个和最后一个真的很大（太大），寻呼机在中间，不管怎样。所以有点不对劲。我最终将使用Jquery网格，所以我认为现在已经足够好了。如果你有任何想法，我洗耳恭听。我有自己的渲染器，可以从寻呼机中生成ul-->li。列表很好地向左对齐；-）弗兰克，你介意分享一下吗？你现在用的是什么？我做了一个快速的测试，North看起来效果最好，再加上分页边距的减少，就像Oliver建议的那样，但并没有低到0。使用

headerPage

facet时的额外空间似乎来自将table类用作viewStyleClass。这意味着这个引导CSS在寻呼机左侧的空TD上被调用：

.table>tbody>tr>TD{padding:8px；}

。我已经在下面更新了我的答案。当然，如果我可以分享它，请观看我的博客以获取即将发布的博客帖子；-）这起到了一定的作用。我可以让它在左下角对齐。这篇文章是很好的参考资料。可能我的问题是我在XPiNC预览。我已经将更新后的扩展库放在了我的Designer上，但我必须等到周末才能将其放在服务器上。Brian，我在上面的问题中添加了更多信息。如果你还有什么想法，我很想听听。谢谢

<xe:pagerSizes id="pagerSizes1" 
               xp:key="headerPager"
               style="left:-20px;position:relative;">
</xe:pagerSizes>