xpages应用程序布局引导程序3-右列中的错误

Question

如果我在appLayout的右列中使用bootstrapdiv，我会得到"有趣"的效果，在屏幕大小sm中，右列覆盖中心列。我认为右列的div类中缺少一个定义（从XPages-ExtLib自动生成的代码）：

<div class="row">
    <div class="col-md-10 col-sm-9 applayout-content"> ... </div>
    <div class="col-md-2 col-sm-3 applayout-column-right">
        <div class="well" style="height:400px;">Right Column</div>
    </div>
</div>

当我在firebug中输入一个colsm定义时，如下所示：

<div class="row">
    <div class="col-md-10 col-sm-9 applayout-content"> ... </div>
    <div class="col-md-2 col-sm-3 applayout-column-right">
        <div class="well" style="height:400px;">Right Column</div>
    </div>
</div>

它按预期工作，效果消失了。我是遗漏了什么，还是ExtLib应用程序布局控件中的错误？

9.0.1服务器上的XPages，ExtLib版本为901v00_16.20160128-1014

Uwe

Answer 1

您是对的，这是使用bootstrapResponsiveApplicationConfiguration时应用程序布局控件中的一个错误。我已经在一个应用程序中使用Bootstrap3.theme和右栏中的一个井重现了这个问题。正如您所建议的，缺少col-sm类确实是原因。

我已经在ExtLib的github存储库中记录了这个问题。将在下一版本的扩展库中提供此问题的修复程序。感谢您突出显示/找到它。

更新：此问题的修复程序在最新的ExtLib版本ExtLib 17中，该版本昨天（2016年6月2日）在openntf网站上发布。

Answer 2

是否应该关闭"col-md-10 col-sm-9鼓掌内容"，以便两者并排出现？

<div class="row">
    <div class="col-md-10 col-sm-9 applayout-content">
        Some text here...
    </div>
    <div class="col-md-2 col-sm-3 applayout-column-right">
        More text here...
    </div>
</div>