xpages 应用程序布局 bootstrap 3 - 右栏错误

Question

如果我在 appLayout 的右栏中使用 bootstrap divs，我会得到 "funny" 效果，在屏幕尺寸 sm 中，右栏覆盖中心栏。我认为这是右列的 div class 中缺少的定义（从 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 中输入 col-sm 定义时：

<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

乌韦

Answer 1

"col-md-10 col-sm-9 applayout-content"是否应该关闭，以便两者并排出现？

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

Answer 2

你是对的，这是使用 bootstrapResponsiveApplicationConfiguration 时应用程序布局控件中的错误。我已经在使用 Bootstrap3.theme 的应用程序中重现了这个问题，并且在右栏方面有一口井。 col-sm class 确实是缺失的原因，正如你所建议的那样。

我已经在我们的 github repository for the ExtLib 上记录了这个问题。扩展库的下一版本将提供针对此问题的修复程序。感谢 highlighting/finding 它。

更新：这个问题的修复是在昨天（2016 年 6 月 2 日）在 openntf 网站上发布的最新 ExtLib 版本 ExtLib 17

xpages 应用程序布局 bootstrap 3 - 右栏错误

xpages application layout bootstrap 3 - error in right column

twitter-bootstrap

xpages-extlib