在网格形成中进行循环。每个类别每行3个帖子。使用bootstrap创建布局。在全宽度它工作和如何预期，但它没有响应。我在这里错了什么想法？
全宽 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> 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. […]</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 […]</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’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 […]</p>
</p>
<span class="shortlink">
<button class="btn btn-success"><a rel="shortlink" href="http://localhost/?p=2356" title="NYC’s Commercial Recycling Laws">Read More</a></button>
</span>
</div>
</div>
</div>
</div>
<!--/.row-->
<div class="clearfix"></div>
</div>
<!--/.container-->
</section>
</html>
答案 0 :(得分：1)
检查您的图片容器和图片，我认为他们没有回应。
您的-replace "-op-config$", ""类具有固定宽度，其中的图片应将.blog-image或width设置为100％。
修改
此外，如果您尝试使用Bootstrap类进行图像响应，则应使用max-width标记中的类.img-responsive，而不是其容器中的类img。类名是.img-responsive而不是image-responsive。
答案 1 :(得分：0)
您是否在头部添加了响应式元标记？如果没有，则添加此标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0">来处理你的HTML部分。
答案 2 :(得分：0)
事实证明问题出在固定高度边框上。
.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;
}
}