Wordpress Grid博客文章，无响应
[英]Wordpress Grid Blog Posts, not responsive
问题描述
Got a loop going in a grid formation. 
有一个循环以网格形式进行。 3 posts per row, per category. 每个类别每行3个帖子。 Using bootstrap to create the layout. 使用引导程序创建布局。 At full width it's working and how intended, however it's not responsive. 在全宽度下，它可以正常工作并达到预期目的，但是却没有响应。 Any ideas what I got wrong here? 有任何想法我在这里弄错了吗？
Full Width https://www.dropbox.com/s/x77wxxp5gmtdrs9/Screenshot%202017-06-20%2017.28.31.png?dl=0 全宽https://www.dropbox.com/s/x77wxxp5gmtdrs9/Screenshot%202017-06-20%2017.28.31.png?dl=0
Reduced Width (not responsive) https://www.dropbox.com/s/01baalrm3u1fybe/Screenshot%202017-06-20%2017.32.42.png?dl=0 减小的宽度（无响应） https://www.dropbox.com/s/01baalrm3u1fybe/Screenshot%202017-06-20%2017.32.42.png?dl=0
Edited Outputted html and css (written in sass originally). 编辑输出的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>
3 个解决方案
解决方案1
1 2017-06-21 14:37:43
Check your image container and your images, I think they're not responsive. 检查您的图片容器和图片，我认为它们没有响应。 Your .blog-image class has a fixed width and the images within it should have width or max-width set to 100%. 您的.blog-image类具有固定的宽度，并且其中的图像应将width或max-width设置为100％。
EDIT 编辑
Also, if you are trying to use the Bootstrap class for image responsiveness, you should use the class .img-responsive in the img tag, not in its container. 另外，如果您尝试使用Bootstrap类来实现图像响应，则应在img标签中而不是在其容器中使用.img-responsive类。 And the class name is .img-responsive and not image-responsive . 类名是.img-responsive而不是image-responsive 。
解决方案2
0 2017-06-21 09:13:29
Have you added responsive meta tag in head section? 您是否在头部添加了响应性元标记？ If not, then add this tag: <meta name="viewport" content="width=device-width, initial-scale=1.0"> to head section of your html. 如果不是，请在HTML的开头部分添加以下标记： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 。
解决方案3
0 2017-06-21 14:44:04
It turns out the problem was with the fixed height border. 事实证明，问题出在固定的高度边框上。
.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; }
Instead will make a media query that removes the border on smaller screen sizes. 而是进行媒体查询，以删除较小屏幕尺寸的边框。
@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; } }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.