Question

将扩展库ApplicationLayout控件与新的Bootstrap功能一起使用时。我想知道如何最好地覆盖网格列设置。目前他们是：

Left Facet 2列，Middle Facet 8列，Right Facet 2列

CSS类是

    col-md-2 applayout-column-left
    col-md-8 applayout-column-middle
    col-md-2 applayout-column-right

我没有看到我可以在ApplicationLayout控件属性中更改此方法。

与此同时，在客户端加载上使用JavaScript，我可以使用以下带有Dojo帮助的JavaScript来更改它：

    dojo.removeClass(document.getElementsByClassName('applayout-content')[0],"col-md-8");
    dojo.addClass(document.getElementsByClassName('applayout-content')[0],"col-md-7");
    dojo.removeClass(document.getElementsByClassName('applayout-column-right')[0] ,"col-md-2");
    dojo.addClass(document.getElementsByClassName('applayout-column-right')[0],'col-md-3');

Answer 1

我发现跳过应用程序布局控件并执行自己的“行”更容易，但如果这不是一个选项，您可以将自己的行和列添加到主要内容方面

<?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">
    <xe:applicationLayout id="applicationLayout1">
        <div class="row">
            <div class="col-md-4">Left</div>
            <div class="col-md-4">Middle</div>
            <div class="col-md-4">Right</div>
        </div>
        <xe:this.configuration>
            <xe:bootstrapResponsiveConfiguration></xe:bootstrapResponsiveConfiguration>
        </xe:this.configuration>
    </xe:applicationLayout>
</xp:view>

ExtensionLibrary ApplicationLayout网格列类设置？

1 个答案: