Div没有以适当的大小显示响应式网页

Question

我需要设计具有响应式设计的关注页面。

我设法使它工作但我必须在每行顶部添加的行创建问题，它打破了设计并且Box容器没有显示相同的大小。

我尝试设置小提琴示例，但由于某种原因设计中断

小提琴更新：http://jsfiddle.net/uNjLu/5/

我需要在下面的图片中显示我的页面，如何通过响应功能正确实现这一点。

  <div class="large-12 content">
        <div class="cover-wrapper">
            <div class="cover-inner">
                <div>
                    <img src="http://placehold.it/243x324&text=[img 1]">
                </div>
            </div>
        </div>
        <div class="cover-wrapper">
            <div class="cover-inner">
                <div>
                    <img src="http://placehold.it/243x324&text=[img 2]">
                </div>
            </div>
        </div>
        <div class="cover-wrapper">
            <div class="cover-inner">
                <div>
                    <img src="http://placehold.it/243x324&text=[img 3]">
                </div>
            </div>
        </div>
        <div class="cover-wrapper">
            <div class="cover-inner">
                <div>
                    <img src="http://placehold.it/243x324&text=[img 4]">
                </div>
            </div>
        </div>

Answer 1

您在div上设置了许多自定义宽度。这些自定义类是重写基础类。

如果您想在此处使用基础课程，请参阅蓝图。请使用small-centered和medium-centered课程将其置于相应的屏幕上

img{
    margin:20px auto;   
}
.header{
        background-color:#7A1F13;
}
.slideshow{
    background-color:#7A1F13;
    height:200px;
}

.footer{
        background-color:#7A1F13;
}

<link href="http://cdn.jsdelivr.net/foundation/5.4.3/css/foundation.css" rel="stylesheet"/>
<!--header area-->
<div class="row header "> 
<h1 class="large-12  text-center">Header</h1>   
</div>
<div class="row  slideshow"> 
<h1 class="large-12  text-center">slideshow</h1>   
</div>
<!--header end-->
<!--Content area-->
<div class="large-12 content">
    <div class="row">
            <div class="small-12 medium-6 large-3 columns">
                <img src="http://placehold.it/243x324&text=[img 1]">
            </div>
                <div class="small-12 medium-6 large-3 columns">
                <img src="http://placehold.it/243x324&text=[img 1]">
            </div>
                    <div class="small-12 medium-6 large-3 columns">
                <img src="http://placehold.it/243x324&text=[img 1]">
            </div>
                        <div class="small-12 medium-6 large-3 columns">
                <img src="http://placehold.it/243x324&text=[img 1]">
            </div>
    </div> 
                        <div class="row">
            <div class="small-12 medium-6 large-3 columns">
                <img src="http://placehold.it/243x324&text=[img 1]">
            </div>
                <div class="small-12 medium-6 large-3 columns">
                <img src="http://placehold.it/243x324&text=[img 1]">
            </div>
                    <div class="small-12 medium-6 large-3 columns">
                <img src="http://placehold.it/243x324&text=[img 1]">
            </div>
                        <div class="small-12 medium-6 large-3 columns">
                <img src="http://placehold.it/243x324&text=[img 1]">
            </div>
    </div> 
                        <div class="row">
            <div class="small-12 medium-6 large-3 columns">
                <img src="http://placehold.it/243x324&text=[img 1]">
            </div>
                <div class="small-12 medium-6 large-3 columns">
                <img src="http://placehold.it/243x324&text=[img 1]">
            </div>
                    <div class="small-12 medium-6 large-3 columns">
                <img src="http://placehold.it/243x324&text=[img 1]">
            </div>
                        <div class="small-12 medium-6 large-3 columns">
                <img src="http://placehold.it/243x324&text=[img 1]">
            </div>
    </div> 
</div>
<!--content end-->
<!--footer area-->
 <div class="row footer"><h1 class="large-12 columns text-center ">Footer Section</h1></div>
<!--footer end-->
</div>

有一个行类并根据您的需要嵌套它们.- small-12 medium-6 large-3 columns。

如果768px, 640px and 340px是您的断点，那么您已经更改了媒体查询。 你可以通过以下两种方法来做到这一点。

1) use sass files of foundation and change breakpoints 2) change all the media-queries in css manually

Fiddle link

fullscreen view