无法使用 dotnetnuke 使引导响应式设计工作答案

【问题标题】：Not able to make bootstrap responsive design work with dotnetnuke无法使用 dotnetnuke 使引导响应式设计工作
【发布时间】：2012-05-28 20:10:15
【问题描述】：

我在 DotNetNuke 项目中使用了 twitter 引导程序。我使用 HTML、CSS、bootstrap 进行设计和布局。当我在不同的移动设备上测试响应式设计时，即使我调整了浏览器窗口的大小，响应式设计也能正常工作。

由于运行良好，我将设计转换为 DotNetNuke Skin。现在，响应式设计只有在我调整浏览器窗口大小时才能正常工作，而不是在移动设备上。我了解 DNN 加载样式表的流程，并且我遵循了它。我已经将我的 skin.css 作为 bootstrap.css 的组合，然后是 bootstrap-responsive.css 的内容

我无法找到问题，就好像我在我的 html 中使用相同的 skin.css，它工作正常，但它不适用于 DNN（在移动设备上）。

【问题讨论】：

标签： css twitter-bootstrap dotnetnuke

【解决方案1】：

您缺少针对移动设备以实现适当规模的元数据。在页面标题中插入以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

【讨论】：

嘿安德烈斯，你是对的，我忘了在 default.aspx 中包含它。
我得到了水平滚动条！我怎样才能删除它？
@SidP 手头没有要测试的移动设备，但您的某个元素可能溢出了您的主容器。一个快速的解决方法是在样式表中添加 body { overflow-x: hidden; } 以隐藏水平滚动条，但更合适的解决方法是寻找溢出的元素。
非常感谢您提出这个问题和回答。在过去的 4 个小时里，我一直在为此苦苦挣扎。 :D
非常感谢！真的对我有帮助，沮丧了一段时间。太棒了

【解决方案2】：

我只是注意到一些有趣的事情并想分享它，也许它会对某人有所帮助。在站点标题部分中，您应该首先包含 bootstrap.css，然后才包含 bootstrap-responsive.css，因为显然 responsive.css 取决于 bootstrap.css

当然元标记也应该存在。

<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />  
<meta name="viewport" content="width=device-width, initial-scale=1.0">

【讨论】：

【解决方案3】：

确保在基本不之前包含响应式 CSS(responsive.css)。

【讨论】：

meltov : 请你告诉我“在基本之后而不是之前”是什么意思
@Nadeem 第一个链接到基本样式表bootstrap.css，然后响应bootstrap-responsive.css。
非常感谢兄弟，我只对“之后和之前”感到困惑