html - Bootstrap 框架不响应 asp.net webform

标签 html css 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 的初学者并且希望学习它。如果有人可以帮助我解决为什么这不起作用,我将不胜感激。

在示例中,他们只是使用 bootstrap.css 作为示例,它似乎对他们有用。对我来说,它在我使用 bootstrap-responsive.css 时有效,但在我想要 1000px 时增加了 1200px 的宽度。

这些 css 文件有什么不同。

感谢您在这方面的帮助。

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

最佳答案

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;
    }
}

关于html - Bootstrap 框架不响应 asp.net webform,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18224823/

相关文章:

html - 当元素是 body 的直接子元素时,mix-blend-mode 在 webkit 浏览器中不起作用

asp.net-mvc - Bootstrap MVC 创建 View 的两列布局

javascript - 我的 jQuery 函数加载速度是否太慢?

jquery - 从 Bootstrap 更改类内部的宽度

html - 背景图片的父元素是什么?

html - 粘性导航和移动响应

javascript - 将 [object HTMLDocument] 转换为字符串

javascript - 在浏览器上滚动时将主菜单渲染到固定的导航栏中

javascript - 如何在 var() 中设置动态属性名称

javascript - Bootstrap 可切换标签图像