Zurb基金会最大排768像素-Java 学习之路

我是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>

宽度默认选项my row width是1000px，如何在zurb基础上将 row 宽度限制为最大768pixels .

Update ：

如果你想要它响应使用以下css：

.row
{
   max-width:768px;
}

2 回答

2
如果你有一个控制css只需添加（更改foundation.css）
```
.row
{
   width: 768px;
}
```
回复于 2024-05-05T03:52:40+08:00
2

在基础项目附带的_setting.scss文件中，有一个变量可以显式更改以定义行宽，而不必用自己的css覆盖它 . 变量看起来像这样：

// $ row-width：rem-calc（1000）;

它位于文件中的“网格”部分下方，还可以访问一系列具有基础的库存的其他设置 . 希望这可以帮助！

回复于 2024-05-05T03:52:40+08:00

Zurb基金会最大排768像素

2 回答

相关问题