FoundationCSS Side 影响如果不包括行答案

【问题标题】：FoundationCSS Side affects if not including rowFoundationCSS Side 影响如果不包括行
【发布时间】：2023-03-04 06:59:01
【问题描述】：

使用 FoundationCSS，如果我通过定义行和列来使用基本网格系统，我会在桌面上得到一个 1000 像素宽的网格。

<div class="row">
  <div class="small-12 columns">
    ...
  </div>
</div>

但是，如果我做同样的事情，但省略“行”，我会得到一个全宽布局。

<div class="small-12 columns">
  ...
</div>

通过省略“行”是否有任何副作用我应该注意？

【问题讨论】：

zurb foundation is it possible to have full row width 的可能重复项
似乎<row> 两侧的内容被媒体查询截断了，所以你可以尝试一下，但我希望较小的屏幕会截断一些内容。

标签： zurb-foundation zurb-foundation-5

【解决方案1】：

我发现最安全的方法是添加一个新类以使容器全宽：

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

并在html中使用：

<body>
  <div class="row full-width">
    <div class="small-12 columns">
      ....
    </div>
    <div class="row"
      <div class="small-6 columns>...</div>
      <div class="small-6 columns>...</div>
    </div>
  </div>
</body>

【讨论】：