Question

在我的asp.net母版页中，我有一个导航栏，它使用bootstrap的网格系统跨越两列，另一个div跨越10列，其中包含我的asp:ContentPlaceHolder。 iframe将从另一个页面放入内容占位符。 iframe的宽度设置为100％。问题是iframe永远不会填充页面宽度的其余部分。请参阅下面的代码。

在我的Site.Master中：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Technology.SiteMaster" %>

<!DOCTYPE html>

<html lang="en" style="height: 100%">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title><%: Page.Title %> - My ASP.NET Application</title>
    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <style>
         .container, .body-content, .row,.col-xs-2, .col-xs-10{
            padding:0px;
            margin:0px;
         }
    </style>
</head>

<body style="height: 100%">
    <form runat="server" style="height: 100%">
        <div class="container body-content" style="height: 100%; width:100%">
           <div class="row" style="height: 100%;">
              <div class="col-xs-2" >
                 <ul class="nav nav-stacked affix" id="sideNavBar"  
                    style=" background-color:rgb(207,205,225); color:rgb(33,40,89); 
                      border-right-style: solid; border-right-width: thin;">
                       <!--List items on navbar...-->
                 </ul>
              </div>
              <div id="contentContainer" class="col-xs-10" 
                  style="float:right; margin:0px; padding:0px; height:100%;">

                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>
                <footer>
                  <p>&copy; <%: DateTime.Now.Year %> - MCF Intranet</p>                 
                </footer>

              </div>
        </div>
    </div>
  </form>
</body>
</html>

在提供内容的页面中：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" 
   AutoEventWireup="true"    CodeBehind="TechPages.aspx.cs"  
      Inherits="Technology.TechPages" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server" >
    <div style="height: 100%; width:100%;"> 
            <iframe id="frame1" name="frame1" src="Pages/Word_and_DM_Word2007.htm" runat="server" style="margin:0px; padding:0px; border-width: 0px; height:100%; width:100%; ">
        </iframe>
    </div>
</asp:Content>

我已经为所有行和列以及放置它们的容器设置了边距和填充为0，因此我无法理解为什么10列div不会占用剩余的宽度页。任何人都可以帮忙解决这个问题吗？

Answer 1

使用宽度为100％的container-fluid并删除填充/边距和其他覆盖。 pull-right是浮动权利的实用程序。从get-go使用Bootstrap实用程序有助于解决调试问题。看起来其他内联样式和覆盖与Bootstrap冲突。

Asp内容未填充bootstrap列

1 个答案: