bootstrap 在我的笔记本电脑上不工作

bootstrap is not working in my laptop

我在我办公室的办公室桌面上使用 asp.net 应用程序和 bootstrap 我的网站页面非常适合桌面显示器屏幕,而在我的笔记本电脑屏幕上屏幕变得非常粗体。

#header {
    margin-top:0px;
    height:120px;
    width:auto;
    background-image:url('http://localhost:5172/Images/sd.jpg');
    /*border:dashed;*/
    border-top-color:green;
}
 #header ul{
            list-style:none;
            height:32px;
   float:right;
            width: 611px;
            margin-top:83px;
            display:block;
}
         #header ul li{
            background-color:red;
            border:1px solid white;
            width:120px;
            height:35px;
            line-height:35px;
            text-align:center;
            float:left;
            position:relative;
        }
         #header ul li a{
            text-decoration:none;
            color:white;
            display:block;
        }

         #header ul li a:hover
            {
            background-color:gold;
        }
         #header ul ul{
            display:none
            
        }

         #header ul li:hover > ul
        {
                display:block;
        margin-top: 0px;
        }
#body {
    height:750px;
    width:auto;
}
#tableBody {
            width: 100%;
            height: 750px;
            background-color: #CC6600;
}
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <link href="CSS/StyleSheet.css" rel="stylesheet" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        .auto-style1 {
            width: 4500px;
        }
        .auto-style2 {
            color: maroon;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width:1100px;margin:0 auto">
            <tr style="width:1100px;height:50px">
                <td style="width:60px">
                    <img src="Images/MyLogo.png" style="width: 100px" />
                </td>
                <td class="auto-style1">
                    <marquee>
                            <asp:Label  ID="Label5m" runat="server" Font-Bold="True" Font-Names="Arial Black" ForeColor="#109AC1" Text="Hello Guys I am Ghayaz My website will be updated soon...........stay with us"></asp:Label></marquee>
                </td>
                <td style="width:900px;text-align:right">
                    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/youtube.png" Width="30px" />&nbsp;&nbsp<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/FB.png" Width="37px" />&nbsp;&nbsp<asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/Images/LINKEDIN.png" Width="36px" />
                    &nbsp;</td>
            </tr>
            <tr style="width:1100px;height:40px;background-color:#5f98f3">
                <td colspan="3">
                    <div id="header">
                  <ul>
            <li><a href="#" class="auto-style2"><strong>HOME</strong></a></li>
            <li><a href="#" class="auto-style2"><strong>About</strong></a></li>
            <li><a href="#" class="auto-style2"><strong>Tutorials</strong></a>
                    <ul>
                        <li><a href="#" class="auto-style2"><strong>SALES AND DISTRIBUTION</strong></a></li>
                        <li><a href="CSHARP.aspx" class="auto-style2"><strong>C-SHARP</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>SQL</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>WCF</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>ASP.NET</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>ADO.NET</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>LINQ</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>ENTITY FRAMEWORK</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>ASP.NET MVC</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>WPF</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>ABAP</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>ETL</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>SSIS</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>SSAS</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>SSRS</strong></a></li>
                    </ul>
            </li>
            <li><a href="#" class="auto-style2"><strong>IntervieQuestions</strong></a></li>
            <li><a href="#" class="auto-style2"><strong>ContactUs</strong></a></li>
            </ul>
                        <span class="auto-style2"><strong>SAP TUTORIALS AND MICROSOFT TUTORIALS</strong></span></div>
                </td>
            </tr>
            <tr style="width:1100px;height:300px">
                <td colspan="3">
                    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
                    <asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick"></asp:Timer>
                    <asp:Image ID="Image1" runat="server" />
                            </ContentTemplate>
                        </asp:UpdatePanel>
                </td>
            </tr>
            <tr style="width:1100px">
                <td colspan="3">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </td>
            </tr>
            <tr style="width:1100px;height:20px">
                <td colspan="3">

                </td>
            </tr>
        </table>
    </div>
    </form>
    <script src="Scripts/jquery-3.1.0.js"></script>
    <script src="Scripts/bootstrap.js"></script>
</body>
</html>

Sandhiya 你应该在所有 asp.net 控件中提供 bootstrap class 然后它就可以工作了。

                                    <div class="input-btn-toolbar" style="width: 103%; background-color: #000000; padding-left: 8px; padding-top: 8px; padding-bottom: 8px; height: 100%;">

                                         <asp:TextBox style="text-transform: uppercase; font-size: 23px; text-align: center;" ID="txtReg" runat="server" type="text" class="form-control"  placeholder="Enter Registration"></asp:Textbox>

                                        <asp:LinkButton runat="server" OnClick="ButtonSearch_Click" Text="Search" CssClass="btn Jumbt btn-custom" style="color:white" > <i aria-hidden="true" class="glyphicon glyphicon-search"></i>&nbsp;&nbsp;Search</asp:LinkButton>&nbsp;&nbsp;

                                       <asp:Button runat="server" OnClick="ButtonEnterTyreSize_Click" Text="Enter Tyre Size" CssClass="btn Jumbt btn-custom " style="color:white" Width="130px"  />
                                     </div>
                                 </div>  

首先要注意的是,您必须在母版页的标题部分添加用于页面缩放的元标记。下面是元标记。

<meta name="viewport" content="width=device-width, initial-scale=1">

以上标签将允许页面检查它是移动设备、平板电脑还是计算机等

在此之后,确保在 bootstrap 文件引用之前添加 jquery 引用。下面是示例。

<script src="~/jquery/1.12.4/jquery.min.js"></script>
<link href="~/css/bootstrap.min.css" rel="stylesheet">
<script src="~/js/bootstrap.min.js"></script>

如果以上相同,则检查 body 标签中的主要 <div> 是否装饰有 class container,如下所示:

<div class="container"></div>

在此 <div> 标签内写入所有内容,这将根据 Bootstrap 标准设置页边距。

如有任何进一步帮助,请发表评论。