Zurb Foundation 最大行数为 768 像素答案

【问题标题】：Zurb Foundation maximum row with 768pixelsZurb Foundation 最大行数为 768 像素
【发布时间】：2014-09-03 10:43:13
【问题描述】：

我是 zurb 基金会的新手，我必须为 768 像素的小屏幕设计网页，我正在使用 zurb 基金会来做这件事。下面是我的基本 HTML 架构

 <!doctype html> 
 <html class="no-js" lang="en">   
 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mailing Subscription Form</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script type="text/javascript" src="js/vendor/modernizr.js"></script>   
 </head>
 <body>
     <form id="form1" runat="server">
       <div class="row">
          <div class="large-12 columns" style="background-color:Red;">
             <h1>Welcome to Foundation</h1>
           </div>
        </div>
     </form> 
 </body> 
 </html>

宽度默认选项我的row 宽度是1000px，如何在zurb 基础中将我的row 宽度限制为最大768 像素。

更新：

如果您希望它具有响应性，请使用以下 css：

.row
{
   max-width:768px;
}

【问题讨论】：

标签： html css zurb-foundation

【解决方案1】：

如果您可以控制 css，只需添加（更改 foundation.css）

.row
{
   width: 768px;
}

【讨论】：

我将为这些更改创建另一个 css 文件并覆盖默认的 zurb css。我试过了，它奏效了。

【解决方案2】：

在基础项目附带的 _setting.scss 文件中，有一个变量可以显式更改以定义行宽，而无需用您自己的 css 覆盖它。变量如下所示：

// $row-width: rem-calc(1000);

它位于文件中的“网格”部分下，还可以让您访问一堆其他的基础设置。希望这会有所帮助！

【讨论】：