引导模板迁移到 ASP.NET 4.5 表单 - 全角渲染问题答案

【问题标题】：Bootstrap Template Migration to ASP.NET 4.5 Forms- Full Width Rendering Issue引导模板迁移到 ASP.NET 4.5 表单 - 全角渲染问题
【发布时间】：2015-03-23 09:19:36
【问题描述】：

http://www.petcenters.com/htmlpage1.html 是我购买的引导模板的重新构建。我将该模板复制到添加到项目中的 htmlpage1.html 中。这运行良好。

我已尝试将此 htmlpage1.html 迁移到 ASP.NET 4.5 Web 窗体项目中，方法是将其分离为 MasterPage 和 Default.aspx。

http://www.petcenters.com

我遇到了 LayerSlider 和 Footer 没有呈现全角的问题，如 http://www.petcenters.com/htmlpage1.html 所示

这是母版页：

<body class="header-fixed">
<form runat="server">
    <div class="wrapper">
        <div class="header header-sticky">
            <div class="container">
            .....
            </div>
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <div class="footer-v1">
            .....
            </div>
        </div>
    </div>  <!--/wrapper-->
</form>
</body>

这是 Default.aspx：

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div id="layerslider" style="width: 100%; height: 500px; margin: 0px auto;">
    .....
    </div>
</asp:Content>

我不知道这个包装类是否导致了问题。尽管如此，我仍然无法成功调试它以确定为什么 LayerSlider 和 Footer 不是全角的。标题也显得更宽。

http://www.petcenters.com/htmlpage1.html Bootstrap HTML 模板运行良好

http://www.petcenters.com 将 HTML 模板引导到 MasterPage 和 Default.aspx。

非常感谢您对此问题的深入了解！

【问题讨论】：

您是否尝试将引导类：“container-fluid”添加到页脚？另外，“包装器”类的 CSS 是什么。
@DanOrlovsky 我没有对 CSS 进行任何更改，因为这在 HTML 页面中可以正常工作。 “container-fluid”已经是 header-default.css 的一部分
我有你的答案。
问题是 body-content 类。尝试删除它，看看会发生什么。
到
没有效果。

标签： html css asp.net twitter-bootstrap

【解决方案1】：

将<div class="container body-content"> 更改为<div class="container-fluid body-content"> 似乎可以解决问题。

引导类container 在某些断点处设置静态width。

【讨论】：

你注意到页眉有一个扩展的宽度吗？你有什么线索吗？
@Paul 是的，标题导航也包含在 container 类中，并且还获得了静态宽度，因此它也没有占据整个宽度
当你说它没有占据整个宽度时，我不清楚，因为它似乎占据了超过引导模板的宽度。
它在petcenters.com 上看起来确实更高，但那是因为body 有 50px 的内边距
事实上它是一个 .aspx 页面并不重要。模板没有 layerSlider 包裹在 <div class="content body-content"> 中，这似乎是区别

【解决方案2】：

这是解决方案的第二部分：

HTML 页面模板没有：

<div class="container body-content">

Bootstrap 是 ASP.NET 4.5 Web 表单模板的一部分。 MasterPage 确实有：

<div class="container body-content">

将 MasterPage div 容器修改为：

<div class="container-fluid body-content">

创建了一个辅助类 .no-padding { padding: 0 !important;并将该类添加到 container-fluid

.container-fluid .no-padding { padding: 0 !important; }

将容器流体 div 修改为：

<div class="container-fluid body-content no-padding">

【讨论】：