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>

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

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

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

Answer 1

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

max-width: 100% !important;

而不是

max-width: 100%;

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