Asp 内容未填充引导列答案

【问题标题】：Asp content not filling bootstrap columnAsp 内容未填充引导列
【发布时间】：2014-08-06 21:37:14
【问题描述】：

在我的 asp.net 母版页中，我有一个导航栏，它使用引导程序的网格系统跨越两列，另一个 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 不会占用页面的剩余宽度。谁能帮忙解决这个问题？

【问题讨论】：

杀死一个内联样式和填充/边距的覆盖。我将表格放在容器和行内并删除宽度。 container-fluid 是 100% 宽度。 pull-right 是向右浮动的实用程序。获得正确的 Bootstrap 设置可能会作为一个很好的起点有所帮助。无聊时很难调试。
是的，很抱歉，我知道这太混乱了，我只是把height 和width 属性放在各处尝试修复它。将我的 body-content 容器更改为 container fluid 完全解决了这个问题，所以你想把它写成答案，我会接受吗？谢谢
我已将我的评论作为答案:)

标签： html css asp.net twitter-bootstrap

【解决方案1】：

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

【讨论】：