Question

我根据Twitter bootstrap创建了一个DNN皮肤。这是非常基本的

<%@ Control Language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>


<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<cut>
<%@ Register TagPrefix="dnn" TagName="Meta" Src="~/Admin/Skins/Meta.ascx" %>

<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>
<%@ Register Src="topLogo.ascx" TagPrefix="dnn" TagName="topLogo" %>



<dnn:DnnJsInclude ID="bootstrapInclude" runat="server" FilePath="bootstrap/js/bootstrap.min.js" PathNameAlias="SkinPath" />
<dnn:DnnCssInclude ID="bootstrapCSS" runat="server" FilePath="bootstrap/css/bootstrap.min.css" PathNameAlias="SkinPath" Priority="14" />
<dnn:DnnCssInclude ID="DnnCssInclude2" runat="server" FilePath="bootstrap/css/cq.css" PathNameAlias="SkinPath" Priority="14" />
<dnn:DnnCssInclude ID="DnnCssInclude1" runat="server" FilePath="bootstrap/css/bootstrap-responsive.css" PathNameAlias="SkinPath" Priority="14" />
<dnn:META runat="server" Name="viewport" Content="width=device-width,initial-scale=1" />


<!-- The main container. -->
<div class="container">
    <div class="row">
        <dnn:topLogo runat="server" id="topLogo" />
    </div>

    <div class="row">
        <div id="contentPane" class="contentPane span12" runat="server"></div>
    </div>


    <div class="row">
       <div class="span12 lichtblauw">
            &nbsp;
        </div>

    </div>
    <div class="row">

        <div class="span12 blauw">
            <div class="row">
                <div class="span1">
                </div>
                <div class="span4">
                    <dnn:COPYRIGHT runat="server" id="COPYRIGHT" />
                </div>


            </div>

        </div>
    </div>

</div>

它运作正常。

现在，如果我使用以下容器：

<%@ Control language="vb" CodeBehind="~/admin/Containers/container.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Containers.Container" %>
<%@ Register TagPrefix="dnn" TagName="TITLE" Src="~/Admin/Containers/Title.ascx" %>
<div class="pleunscontainer"><h2><dnn:TITLE runat="server" /></h2><div id="ContentPane" runat="server"></div></div>

如果我使用这个容器来添加一个简单的模块，代码就会中断并且bootstrap框架的响应能力会停止。

任何想法导致这种情况发生的原因是什么？一旦我取下容器（留空）或使用DarkNight容器它工作正常，我很困惑......

更新

我的皮肤和容器的页面 [删除链接]

使用我的皮肤和默认的暗夜容器页面（简单） [删除链接]

您会注意到，在更改浏览器的宽度后，第二个将调整大小并转到适合移动设备的版本。第一个没有。

Answer 1

好的，感谢发布链接，我现在明白了这个问题。

问题在于<head>部分。

请将responsive.css放在bootstrap.css之后。现在它高于它，所以它提出了问题。我刚刚在DevTools中更改了它并且工作正常。

旧HTML

<link href="/dotnetnuke/Portals/_default/Skins/CQ/bootstrap/css/bootstrap-responsive.css?cdv=24" type="text/css" rel="stylesheet">
<link href="/dotnetnuke/Portals/_default/Skins/CQ/bootstrap/css/bootstrap.min.css?cdv=24" type="text/css" rel="stylesheet">

更改

<link href="/dotnetnuke/Portals/_default/Skins/CQ/bootstrap/css/bootstrap.min.css?cdv=24" type="text/css" rel="stylesheet">
<link href="/dotnetnuke/Portals/_default/Skins/CQ/bootstrap/css/bootstrap-responsive.css?cdv=24" type="text/css" rel="stylesheet">

就是这样。您的问题现在就解决了。

使用DNN容器打破了bootstrap base skin的响应能力

1 个答案: