Foundation Row 阻止全屏网页

Question

我正在尝试使用基础框架制作一个宽度为 100% 的网页，在我尝试添加 "div class="row" " 容器之前它工作正常。

我要的是两张相邻的图片，分别占8列和4列。这些图像的两边都应该没有填充，并覆盖整个屏幕。为此，我应用了以下代码。

<div class="row collapse fullwidth">
    <div class="large-8 medium-12 relative columns">
        <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
            <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
               <h2 class="brighten">Portfolio</h2>
            </div>
        </a>
    </div>
    <div class="large-4 medium-12 relative columns">
         <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
            <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
                <h2 class="brighten">Portfolio</h2>
            </div>
         </a> 
    </div>
  </div>

这几乎完全符合我的预期，只是 "row" 似乎在网页的左侧和右侧添加了空栏。我不想要这个。但是，如果没有 "row" class，我无法折叠列以删除填充。所以这似乎是一个或另一个的选择。我找到了添加代码以尝试强制全角的建议，但这对我不起作用，所以我正在寻找其他解决方案。

.fullwidth {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: 100%;
}

任何帮助都会很棒。谢谢！

Answer 1

只是在 Codepen (here) 中使用它，您的 CSS 似乎无法覆盖 .row class 的 Foundation CSS。

max-width: 100% !important;

而不是

max-width: 100%;

帮我修好了。如果您希望行 div 始终像这样，您可能需要修改实际的 Foundation CSS。

Foundation Row 阻止全屏网页

Foundation Row preventing fullscreen webpage

html

javascript

css

jquery

zurb-foundation