Question

我正在尝试使用基于bootstrap框架的Master页面构建ASP.NET网站。我需要安装一个包含iFrame的页面来占用整个屏幕宽度。目前它在左侧和右侧留下了一些空间（可能是默认的15px的容器类，我尝试在bootstrap.css中将其更改为0）

我也尝试在容器流体中使用行类，然后使用col-lg-12和col-md-12但是左右白色空间不会消失！任何帮助将不胜感激，因为我对这项技术很陌生。主页代码：

    <!DOCTYPE html>

<html lang="en">
<body>
    <div class="container-fluid col-lg-12 col-md-12">

        <form runat="server">
            <asp:ScriptManager runat="server">

                <Scripts>
                    <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                    <%--Framework Scripts--%>

                </Scripts>
            </asp:ScriptManager>


            <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" runat="server" href="About.aspx">
                            <img class="media-object media-middle" src="logo.png" alt="Logo" /></a>
                        <a class="navbar-brand" runat="server" href="~/">DASHBOARDS</a>



                    </div>
                    <div class="navbar-collapse collapse" style="text-align: end">

                        <asp:Label ID="Label1" CssClass="label" runat="server" Text=""></asp:Label>
                        <asp:Label ID="Label2" CssClass="label" runat="server" Text=""></asp:Label>
                        <asp:Label ID="Label3" CssClass="label" runat="server" Text=""></asp:Label>
                        <asp:Button ID="btnClose" CssClass=" btn btn-primary btn-default" runat="server" Text="Change Parameters" OnClick="btnChange_Click" />

                    </div>
                </div>
            </div>
          <div class="container body-content">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder> 
                <hr />
            </div>
        </form>
    </div>

</body>
</html>

PAGE CODE：

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">


   <div class="container-fluid col-lg-12 col-md-12">               

            <asp:Panel ID="Panel1" runat="server">

                <div id="menu" role="group">

                    <asp:LinkButton ID="LinkButton1" CssClass="activenew" runat="server" OnClick="LinkButton1_Click">Button1</asp:LinkButton>

                    <asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">Button2</asp:LinkButton>

                    <asp:LinkButton ID="LinkButton3" runat="server" OnClick="LinkButton3_Click">Button3</asp:LinkButton>

                    <asp:LinkButton ID="LinkButton4" runat="server" OnClick="LinkButton4_Click">Button4</asp:LinkButton>


                </div>

            </asp:Panel>

            <!-- 16:9 aspect ratio -->
            <div class="embed-responsive embed-responsive-16by9">
                <iframe id="iFrameDiv" runat="server" class="embed-responsive-item" style="border: 1px solid"></iframe>
            </div>
        </div>

</asp:Content>

我希望第二页中的iFrame根据屏幕宽度和高度占用空间。目前它在底部，左右都留有空间！

如何在bootstrap容器流体类中制作iFrame占用屏幕宽度？

0 个答案: