如何让这个小部件在移动版上显示?

时间:2016-01-22 10:42:51

标签: css mobile widget blogger

在我的博客博客中,我在一个'b:section'中有两个小部件。第一个是流行的帖子小部件,另一个是流畅的YouTube视频小部件。两个小部件都正确显示在桌面版本上。当从桌面观看移动版时,它们还在移动版上显示。但是当在真实的移动设备中时,只显示第一个小部件(热门帖子)。而且,当从桌面移动版本时,如果桌面窗口宽度减小到移动大小,则第二个小部件(youtube视频)消失。

但是,当消失的第二个小部件作为“b:section”中的第一个小部件放在顶部时,两个小部件在真实移动设备中显示得太正确并且根本没有问题。

请帮助我将这两个小部件显示在真实的移动设备上而不更改小部件顺序。 “b:section”中两个小部件的代码如下所示。

此'b:section'的第一个小部件之后的任何'b:section'中的任何youtube视频小部件都不会显示在真实的移动设备中。

<div id='widget_tab'>
<div class='tabs-inner' id='tab1'>
<ul>
<!--Enter-Tab-1-Content-Here-->

<b:section id='tabs-1' preferred='yes' showaddelement='yes'>
  <b:widget id='PopularPosts1' locked='false' mobile='yes' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><span><data:title/></span></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='40px' width='40px'/>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/> 
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
        <b:if cond='data:post.thumbnail'>
            <img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='55px' width='60px'/>
<b:else/>
            <img alt='no image' height='55px' src='http://rccigmimg.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='60px'/>
        </b:if>
        <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>

  <b:widget id='HTML6' locked='false' mobile='yes' title='' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

</b:section>



</ul>

</div>

0 个答案:

没有答案