Bootstrap框架对asp.net webform没有响应

时间:2013-08-14 06:39:10

标签: html css3 twitter-bootstrap webforms responsive-design

我想在我的asp.net webform网站上使用bootstrap v2.3.2。我正在关注本教程link。到目前为止它看起来很好,但是当我重新调整浏览器窗口大小时,网页没有调整大小。它只是保持与响应页面相同的大小。

这是我以下的ASP.Net代码MasterPage.aspx& Default.aspx页面

MasterPage.aspx

<head runat="server">
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../styles/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="../styles/english_css.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<!-- Master Page -->
<div>
<!-- Container -->
    <div class="container">
<!-- Header -->
        <div class="row-fluid">
            <div class="span12">
                <div class="header-row1">
                </div>
            </div>
         </div>
<!-- Header -->
        <div class="row-fluid">
            <div class="span12">
            <!-- Content  -->
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

                </asp:ContentPlaceHolder>
            <!-- Content -->
            </div>
        </div>
<!-- Footer -->
        <div class="row-fluid"><div class="span12"><h1>Footer Section</h1></div></div>
<!-- Footer -->
      </div>
 <!-- Container -->
</div>
<!-- Master Page -->
</form>
<script type="text/javascript"  src='<%# ResolveUrl ("~/script/jquery-1.10.2.min.js") %>'></script>
<script type="text/javascript"  src='<%# ResolveUrl ("~/script/bootstrap.min.js") %>'></script>
</body>
</html>

Default.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/en/SiteMasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="row-fluid"><div class="span12"><h1>Content Area</h1></div></div>
</asp:Content>

我实际上正在寻找一个asp.net网络表单模板,就像在图像中显示一样。

enter image description here

我只是一个bootstrap&amp; amp;的初学者希望学习它。如果有人可以帮助我解决为什么这不起作用,我将不胜感激。

在示例中,他们只是使用bootstrap.css作为示例&amp;它似乎对他们有用。对我来说,当我使用bootstrap-responsive.css但它增加了1200px的宽度而我需要1000px时,它可以工作。

thos css文件之间有什么不同。

对此方面的帮助表示赞赏。

更新:我必须添加两个版本的bootstrap.css,以防我使用v2,否则我只能使用`bootstrap。 我现在的问题是我希望主容器的宽度为1000px。我怎样才能改变它

1 个答案:

答案 0 :(得分:3)

Bootstrap 2提供两个选项,您可以从customize section下载单个文件中编译的所有CSS,否则响应组件将放在单独的文件中bootstrap-responsive.css

要覆盖容器的宽度,您需要将其添加到CSS:

@media (min-width: 1200px){
    .container, 
    .navbar-static-top .container, 
    .navbar-fixed-top .container, 
    .navbar-fixed-bottom .container {
        width: 1000px;
    }
}