除非刷新，否則幻燈片不會在瀏覽器中調整大小

Question

我正在更新網站以使其具有響應能力。 這可能不是最好的方法，但是我的基本方法是添加引導CSS和js，然后使用行和列在不同尺寸的屏幕上將列換行。

除了首頁上的幻燈片放映外，其他一切都非常順利。 刷新瀏覽器時，此幻燈片以各種不同的屏幕尺寸完美地包裹了我，但是當我只是調整瀏覽器窗口的大小時，幻燈片右側帶有文本的列沒有響應我想要的方式。

幻燈片使用的是jquery cycle插件 。 此時，我正在使用實時測試服務器，您可以在此處看到實時示例。

我的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溢出，從而給您一個難看的外觀（僅在刷新頁面時才解決）。