引导旋转木马打破了XSLT HTML布局在SharePoint

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内容查询网页组件（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;')" /> 

---

然后 我添加它在一个web部件区中的页面布局：

<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-我加入“主动”类第一指示符和项目，并且在JS手动初始化转盘：

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

---

4-毕竟传送带运行良好，但页面的HTML布局打破，页脚为g容器下卷板机：

---

添加转盘后：

---

增加传送带前

---

PL如果有人知道为什么会发生这种情况，请问如何帮助解决问题？

Answer 1

从我在XSLT部分可以看到的BeginColumn中有一个div，它在EndColumn中没有关闭。

在开始的EndColumn处添加</div>应该解决您的问题。