0
ループがグリッド形成に入っています。カテゴリごとに行ごとに3つの投稿。ブートストラップを使用してレイアウトを作成する。全幅でそれは働いていて、どのように意図されていますが、それは反応しません。私がここで間違っているものは何ですか？Wordpressグリッドブログ投稿、反応しない
全幅が 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>
あなたのPHPを削除し、フィドルでそれを再現するために、HTML出力をしてください共有することができます。 – pbenard
OK、htmlとcssの出力で編集しました。 – Rick
追加されたブートストラップCDN – Rick