Hostinger AI Builder 手动模式全宽区块设置教程

Hostinger AI Builder 手动模式提供的所有网站模板均采用**响应式网页设计，以确保在所有设备上都能获得最佳用户体验。响应式网页设计 意味着你的网站内容会根据访问者的设备属性**（屏幕尺寸、分辨率等）自动调整——略微拉伸或收缩。

如果你想先使用预制设计，再进一步自定义样式，请参阅如何选择网站模板。

要让网站两侧或边缘完全拉伸并实现版块全宽显示，你需要通过添加以下代码来禁用部分响应式布局。请注意，根据访问者设备属性的不同，显示的内容可能会导致网站布局变形。

下文所述的更改在编辑器中不可见。要查看效果，请进入网站的**预览模式或在线访问**你的网站。

在桌面端和移动端让所有版块全宽显示

复制以下代码：

<style>
    .block-layout, .block-layout--layout {
        max-width: none !important;
        padding: 0 !important;
    }
</style>

然后，进入网站的 More (⋯)（更多）→ Integrations（集成），将代码粘贴到 Custom code（自定义代码）输入框中。接着，保存更改并更新你的网站。

让特定版块全宽显示

如果只想修改某个特定版块，你需要知道该版块的 section ID（版块 ID）。你可以借助浏览器中的开发者工具，通过**检查页面元素**找到它：

在桌面端和移动端

复制以下代码：

<style>
    #sectionID div:nth-of-type(2) {
        max-width: none !important;
        padding-inline: 0 !important;
    }
</style>

在代码中，将 sectionID 替换为目标版块的实际 ID。

在桌面端

复制以下代码：

<style>
    @media screen and (min-width: 920px) {
        #sectionID div:nth-of-type(2) {
            max-width: none !important;
        }
    }
</style>

在代码中，将 sectionID 替换为目标版块的实际 ID。

在移动端

<style>
    @media screen and (max-width: 920px) {
        #sectionID div:nth-of-type(2) {
            max-width: none !important;
            padding-inline: 0 !important;
 }
}
</style>

在代码中，将 sectionID 替换为目标版块的实际 ID。

然后，进入网站的 More (⋯)（更多）→ Integrations（集成），将代码粘贴到 Custom code（自定义代码）输入框中。接着，保存更改并更新你的网站。

全宽版块可以应用于网站中除页眉（header）版块之外的所有版块。

现在，你的网站已应用你所选择的全局和局部样式设置。