Bootstrap 轮播中断了 html 在 Sharepoint 上使用 XSLT 的布局

Question

我遇到了这个奇怪的问题，请继续关注其他问题：

1- 我有这个静态轮播 html 代码：（在浏览器上工作）

<div class="Awareness-section no-padding col-md-12 col-sm-12 col-xs-12">
    <div id="Awareness-carousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#Awareness-carousel" data-slide-to="0" class="active">1</li>
          <li data-target="#Awareness-carousel" data-slide-to="1">2</li>
          <li data-target="#Awareness-carousel" data-slide-to="2">3</li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <p class="Awareness-title">Awareness 1</p>
            <p class="Awareness-desc">Content 1</p>
        </div>

          <div class="item">
            <p class="Awareness-title">Awareness 2</p>
            <p class="Awareness-desc">Content 2</p>
          </div>

          <div class="item">
            <p class="Awareness-title">Awareness 3</p>
            <p class="Awareness-desc">Content 3</p>
          </div>
        </div>

      </div>
    <p class="Awareness-view-all"><a href="">View All</a></p>
</div>

2- 然后我使用 Sharepoint 的内容查询 Web 部件 (XSLT) 使其动态化，如下所示：

  <xsl:variable name="BeginColumn" select="string('&lt;div id=&quot;Awareness-carousel&quot; class=&quot;carousel slide&quot;&gt;&lt;!-- Indicators --&gt;&lt;ol class=&quot;carousel-indicators&quot;&gt;&lt;li data-target=&quot;#Awareness-carousel&quot; data-slide-to=&quot;0&quot;&gt;1&lt;/li&gt;&lt;li data-target=&quot;#Awareness-carousel&quot; data-slide-to=&quot;1&quot;&gt;2&lt;/li&gt;&lt;li data-target=&quot;#Awareness-carousel&quot; data-slide-to=&quot;2&quot;&gt;3&lt;/li&gt;&lt;/ol&gt;&lt;!-- Wrapper for slides --&gt;&lt;div class=&quot;carousel-inner&quot; role=&quot;listbox&quot;&gt;')" />
                          <xsl:variable name="EndColumn" select="string('&lt;!-- Left and right controls --&gt;&lt;a class=&quot;left carousel-control&quot; href=&quot;#Awareness-carousel&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;&lt;span&gt;&lt;i class=&quot;fa fa-angle-left&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;&lt;/a&gt;&lt;a class=&quot;right carousel-control&quot; href=&quot;#Awareness-carousel&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;&lt;span&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;&lt;/span&gt; &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;aw-vall&quot;&gt;&lt;p class=&quot;Awareness-view-all&quot;&gt;&lt;a href=&quot;/Arabic/Pages/allawareness.aspx&quot;&gt;&#x639;&#x631;&#x636; &#x627;&#x644;&#x643;&#x644;&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;')" />

然后我将它添加到页面布局中的 webpart 区域中：

<div class="Awareness-section no-padding col-md-12 col-sm-6 col-xs-12">
    <WebPartPages:WebPartZone id="AwarenessSection" runat="server" title="Awareness Webpart"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</div>

3- 我将 'active' class 添加到第一个指标和项目，并在 js 中手动初始化轮播：

$('.carousel-indicators li:first').addClass("active");
$('.carousel-inner .item:first').addClass("active");
$('#Awareness-carousel').carousel();

4- 毕竟，轮播效果很好，但是 html 页面布局被破坏了，页脚在容器下面：

添加轮播之前：

添加轮播后：

如果有人知道为什么会发生这种情况以及尝试的解决方案是什么，请提供帮助？

Answer 1

从我在 XSLT 部分看到的情况来看，BeginColumn 中有一个 div 在 EndColumn 中没有关闭。

在 EndColumn 的开头添加 </div> 应该可以解决您的问题。

Bootstrap 轮播中断了 html 在 Sharepoint 上使用 XSLT 的布局

Bootstrap Carousel breaks html layout with XSLT on Sharepoint

html

css

xslt

twitter-bootstrap

bootstrap-carousel