Wordpress Grid 博客文章，不响应答案

【问题标题】：Wordpress Grid Blog Posts, not responsiveWordpress Grid 博客文章，不响应
【发布时间】：2017-06-21 22:51:03
【问题描述】：

得到一个以网格形式进行的循环。每行，每个类别 3 个帖子。使用引导程序创建布局。在全宽范围内，它可以正常工作以及预期的方式，但是它没有响应。有什么想法我在这里做错了吗？

全宽 https://www.dropbox.com/s/x77wxxp5gmtdrs9/Screenshot%202017-06-20%2017.28.31.png?dl=0

缩小宽度（不响应） https://www.dropbox.com/s/01baalrm3u1fybe/Screenshot%202017-06-20%2017.32.42.png?dl=0

已编辑 输出的 html 和 css（最初用 sass 编写）。

#blog-section {
  padding: 53px 0
}

#blog-section h1,
#blog-section h2,
#blog-section h3,
#blog-section h4,
#blog-section h5,
#blog-section h6,
#blog-section a {
  padding: 20px 0 10px 0;
  -ms-word-wrap: break-word;
  word-wrap: break-word
}

#blog-section h1 {
  color: #72b466;
  font-size: 30px;
  line-height: 35px;
  margin-bottom: 23px;
  padding-bottom: 22px;
  display: block;
  font-family: 'PT Sans Narrow', sans-serif;
  font-weight: 400;
  border-bottom: 2px solid #ddd
}

#blog-section h2 {
  font-size: 22px;
  text-align: center;
  line-height: 28px;
  font-family: 'Roboto Slab', serif;
  font-weight: 400;
  margin-bottom: 12px
}

#blog-section h3 {
  font-size: 28px;
  text-align: center;
  line-height: 28px;
  font-family: 'Roboto Slab', serif;
  font-weight: 400;
  margin-bottom: 12px
}

#blog-section .blog-image {
  width: 300px;
  height: auto
}

#blog-section p {
  font-size: 14px;
  font-weight: 500px
}

#blog-section .blog-image {
  margin: 0 auto
}

#blog-section a {
  color: inherit;
  text-decoration: none !important
}

#blog-section .shortlink {
  color: crimson
}

#blog-section .custom-border {
  padding: 10px;
  margin-bottom: 20px
}

#blog-section .btn-home {
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 5px
}

#blog-section .btn-list {
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 5px
}

#blog-section .row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

#blog-section .grid-loop {
  border: 1px solid #ddd;
  background-color: rgba(86, 61, 124, 0.15);
  height: 100%;
  padding: 10px;
  border: 2px solid gray
}

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<section id="blog-section">
  <div class="container my-container">
    <div class="row row-eq-height">
      <div class="col-xs-12 col-md-4">
        <div class="grid-loop">
          <div class="custom-border">
            <a class="perm_link" href="http://localhost/certified-compostable-products/">
              <h2>Certified Compostable Products</h2>
              <div class="blog-image image-responsive"><img width="251" height="250" src="http://img.dummy-image-generator.com/abstract/dummy-251x250-DesiccationCracks.jpg" class="attachment-img-251x250 wp-post-image" alt="image4" /></div>
            </a>
            <p>
              <p>&nbsp; PLEASE NOTE: We ALWAYS recommend that businesses replace disposable products with reusable ones. Waste reduction is the best way to handle your waste, followed by recycling and composting. Is there a way for you to stop using straws
                altogether, rather than looking for a compostable straw? Or coffee cup? Or plate? That’s the goal. [&hellip;]</p>
            </p>
            <span class="shortlink">
                            <button class="btn btn-success"><a rel="shortlink" href="http://localhost/?p=2382" title="Certified Compostable Products">Read More</a></button>
                        </span>
          </div>
        </div>
      </div>


      <div class="col-xs-12 col-md-4">
        <div class="grid-loop">
          <div class="custom-border">
            <a class="perm_link" href="http://localhost/importance-of-signage/">
              <h2>Importance of Signage</h2>
              <div class="blog-image image-responsive"><img width="251" height="250" src="http://img.dummy-image-generator.com/abstract/dummy-251x250-DesiccationCracks.jpg" class="attachment-img-251x250 wp-post-image" alt="image3" /></div>
            </a>
            <p>
              <p>You may have read the title of this post and thought: “Everyone knows how to recycle, do I really need to put up signs?” Yes you do! It’s very, very important, and it’s the law!. Most people know, or think they know, the basics of recycling,
                but when they are standing in front of three [&hellip;]</p>
            </p>
            <span class="shortlink">
                            <button class="btn btn-success"><a rel="shortlink" href="http://localhost/?p=2372" title="Importance of Signage">Read More</a></button>
                        </span>
          </div>
        </div>
      </div>


      <div class="col-xs-12 col-md-4">
        <div class="grid-loop">
          <div class="custom-border">
            <a class="perm_link" href="http://localhost/nycs-commercial-recycling-laws/">
              <h2>NYC&#8217;s Commercial Recycling Laws</h2>
              <div class="blog-image image-responsive"><img width="251" height="250" src="http://img.dummy-image-generator.com/abstract/dummy-251x250-DesiccationCracks.jpg" class="attachment-img-251x250 wp-post-image" alt="image1" /></div>
            </a>
            <p>
              <p>NYC’s commercial recycling laws are hard to keep up with and key information is often difficult to find. Don’t stress! We’ll help you stay up to date and in compliance. The most recent official notice regarding commercial recycling rules
                in NYC was released by the NYC Department of Sanitation on February 5, 2016. Link to [&hellip;]</p>
            </p>
            <span class="shortlink">
                            <button class="btn btn-success"><a rel="shortlink" href="http://localhost/?p=2356" title="NYC&#8217;s Commercial Recycling Laws">Read More</a></button>
                        </span>
          </div>
        </div>
      </div>
    </div>
    <!--/.row-->
    <div class="clearfix"></div>


  </div>
  <!--/.container-->



</section>

</html>

【问题讨论】：

您能否删除您的 php 并分享 html 输出，以便在小提琴中重现它。
好的，我用 html 和 css 输出编辑了它。
并添加了引导 CDN

标签： php html wordpress twitter-bootstrap-3 sass

【解决方案1】：

检查您的图像容器和图像，我认为它们没有响应。您的 .blog-image 类具有固定宽度，其中的图像应将 width 或 max-width 设置为 100%。

编辑

此外，如果您尝试使用 Bootstrap 类来实现图像响应，则应在 img 标记中使用类 .img-responsive，而不是在其容器中。并且类名是.img-responsive 而不是image-responsive。

【讨论】：

谢谢尤里，我找到了问题。这是背景，固定的边界与响应能力相冲突。我将为较小的设备提供不同的视图。
很高兴您找到了解决方案。我用新信息编辑了我的答案，它可能对你也有用。

【解决方案2】：

您是否在 head 部分添加了响应式元标记？如果没有，则添加此标签： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 到您的 html 的 head 部分。

【讨论】：

示例中没有，但我的本地构建具有所需的所有标题、样式、脚本和元标记。在此处添加，但没有工作。

【解决方案3】：

原来问题出在固定高度边框上。

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
.grid-loop {
  border: 1px solid #ddd;
  background-color: rgba(86, 61, 124, .15);
  height: 100%;
  padding: 10px;
  border: 2px solid gray;
}

而是会进行媒体查询，以删除较小屏幕尺寸的边框。

@media (min-width: 992px) {
  .row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .grid-loop {
    border: 1px solid #ddd;
    background-color: rgba(86, 61, 124, .15);
    height: 100%;
    padding: 10px;
    border: 2px solid gray;
  }
}

【讨论】：