0

我想为我的基于 asp.net webform 的网站使用 bootstrap v2.3.2。我正在关注本教程链接。到目前为止，它看起来不错，但是当我重新调整浏览器窗口的大小时，网页没有调整大小。它只是保持相同的大小，就好像它不是响应页面一样。

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

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 网络表单模板，如图所示。

在此处输入图像描述

我只是引导程序的初学者并希望学习它。如果有人可以帮助我解决为什么这不起作用，我将不胜感激。

在示例中，他们只是bootstrap.css用于示例并且它似乎对他们有用。对我来说，它在我使用时有效，bootstrap-responsive.css但在我想要 1000 像素时增加了 1200 像素的宽度。

这些 css 文件之间有什么不同。

感谢您提供这方面的帮助。

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

4

1 回答 1

3

Bootstrap 2 提供了两个选项，您可以从自定义部分下载所有编译在单个文件中的 CSS ，否则将响应式组件放在单独的文件中bootstrap-responsive.css

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

@media (min-width: 1200px){
    .container, 
    .navbar-static-top .container, 
    .navbar-fixed-top .container, 
    .navbar-fixed-bottom .container {
        width: 1000px;
    }
}
于 2013-08-14T06:59:31.333 回答