幻灯片不包装在浏览器调整大小，除非我刷新

Question

我正在更新网站，使其响应。这可能不是最好的方法，但我的基本方法是添加bootstrap css和js，然后使用行和列来使页面上的列在不同大小的屏幕上换行。

除首页上的幻灯片外，一切都非常流畅。当我刷新浏览器时，此幻灯片显示在所有不同的屏幕尺寸下都非常优雅，但是当我只是调整浏览器窗口的大小时，带有幻灯片右侧文本的列没有按照我希望的方式响应。

幻灯片显示使用的是jquery cycle plugin。在这一点上，我正在开发一个现场测试服务器，您可以看到现场示例here。

我的HTML标记看起来是这样的：

<div class="row"> 
<div class="col-xs-12">  

<div id="homepage_featured" class="rounded_shadow"> 
<div id="homepage_slideshow_container"> 
    <div id="homepage_slideshow"> 
     {% for post in slideshow_posts %} 
     <div class="homepage_slide" style="background-color: #ffffff;"> 
      <div class="row"> 
      <div class="col-sm-6 col-xs-12"> 
       <center> 
       <a href="{{ post.permalink }}"><img src="{{ post.image }}" class="img-responsive"/></a> 
       </center>  
      </div> <!-- col --> 
      <div class="col-sm-6 col-xs-12"> 
       <div class="homepage_slide_copy"> 
        <h4>{{ post.department }}</h4> 
        <h3><a href="{{ post.permalink }}">{{ post.title }}</a></h3> 
         {% if post.excerpt %}<p>{{ post.excerpt }}</p>{% endif %} 
        <p><strong>{{ post.author }}</strong></p> 
        <p><a href="{{ post.permalink }}" class="read_more">Read more</a></p> 
       </div> <!-- slide copy --> 
      </div> <!-- col --> 
      </div> <!-- row --> 
     </div> <!-- homepage_slide --> 
          {% endfor %} 
    </div> <!-- homepage_slideshow --> 
    </div> <!-- homepage_slideshow_container --> 
     <div class="row"> 
     <div id="homepage_slideshow_pager"></div> 
     </div> <!-- row --> 
</div> <!-- homepage_featured --> 
</div> <!-- col --> 
</div> <!-- row --> 

及相关的CSS看起来是这样的。

#content #homepage_featured { 
    margin-bottom: 10px; 
    padding: 7px; 
    background-color: #ffffff; 
} 

#content #homepage_slideshow { 
    background-color: #ffffff !important; 
    width: 100% !important; 
} 

#content #homepage_slideshow_container { 
    margin-bottom: 20px; 
    width: auto !important; 
    position: relative; 
    background-color: #ffffff; 
} 
#content #homepage_slideshow .homepage_slide { 
    display: none; 
} 
#content #homepage_slideshow .homepage_slide:first-child { 
    display: inline; 
} 
#content #homepage_slideshow .homepage_slide img { 
    float: left; 
} 
#content #homepage_slideshow .homepage_slide .homepage_slide_copy { 
    margin-left: 10px; 
} 
#content #homepage_slideshow_pager { 
    width: auto; 
    position: absolute; 
    bottom: 10px; 
    left:50%; 
} 
#content #homepage_slideshow_pager a { 
    margin: 0 10px 10px 0; 
    text-decoration: none; 
    color: #dc4b46; 
    display: inline; 
    cursor: pointer; 
} 
#content #homepage_slideshow_pager a.activeSlide { 
    border-bottom: 1px solid black; 
} 
#content .homepage_column { 
    padding: 0.7em; 
    background-color: white; 
} 
#content .homepage_current_issue_cover { 
    -webkit-box-shadow: 2px 2px 3px lightgray; 
    -moz-box-shadow: 2px 2px 3px lightgray; 
    box-shadow: 2px 2px 3px lightgray; 
    margin-bottom: .5em; 
} 
#content .homepage_column h4 a span { 
    font-family: ff-meta-serif-sc-web-pro, 'Georgia', 'Times New Roman', 'Times', serif; 
    font-size: 0.9em; 
    text-transform: none; 
    color: gray; 
} 

Answer 1

在你main.css文件

取出从#content #homepage_slideshow_container和#content #homepage_slideshow .homepage_slide

所有的造型，并添加这些样式

#content #homepage_slideshow_container { 
    margin-bottom: 20px; 
    width: auto !important; 
    position: relative; 
    background-color: #ffffff; 
    height:180px; !important;; 
    overflow:hidden; 

} 
#content #homepage_slideshow .homepage_slide { 
    display:none; 
    position:relative !important; 
    width:100% !important; 
    height:70% !important;; 
    overflow:hidden; 
} 

时，你的窗口小我注意到，幻灯片放映该图片旁边的内容溢出其父div，从而给你一个丑陋的外观（这只是在刷新页仅）