Question

我正在制作一个带有bootstrap的asp网站。我想知道如何使所有的asp按钮宽度相同，而不是用空格填充文本。我创建了一个备用css文件并使用了css类标记。我错过了什么吗？

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="admin.aspx.cs"         Inherits="SCBA.admin" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Admin</title>
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="stylesheet3.css"/>
    <style>
        .box {
            border:1px solid grey;
            background-color:#d3d3d3;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
             <script src="../Scripts/jquery.min.js"></script>
              <script src="../Scripts/boostrap.min.js"></script>
         <div class="navbar navbar-default">
            <div class="container">
                 <div class="navbar-header">
                        <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Administration" />  <br />
                        <asp:Button ID="Button3" runat="server" cssClass="button1" onclick="Button3_Click" Text="Resource" />  
                 </div>
            </div>             
        </div>     
    </form>
</body>
</html>

这是我的CSS

.button1
{
    width: 200px;
}

Answer 1

根据您使用的浏览器，学习使用browser tools，以便您自己检查HTML和CSS元素。

以下是帮助您朝着正确方向前进的一些步骤：

查看按钮类的Bootstrap documentation，然后覆盖自定义样式表中的相关Bootstrap CSS类以更改其外观。此外，请勿在响应式网站中使用固定宽度，请使用百分比。看起来你根本没有利用Bootstrap类来实现这个

.NameOfBootstrapButtonClass { 宽度：25％; }
将您的脚本链接移至关闭正文标记
删除所有内联CSS和CSS链接 - 然后从解决方案资源管理器中将所需的CSS文件拖到ASP页面的head部分。这可以保证您的链接正确，但仅在您使用VS
不要在开发中使用缩小的CSS文件 - 在部署时，将捆绑所有最小版本以提高性能。就个人而言，我在本地工作时注释掉BundleConfig类的RegisterBundles方法中的大部分捆绑
如果您正在构建网站，那么在没有明智地使用母版页和用户控制的情况下，您将获得大量冗余。
您的头部没有viewport标记，因此您的网站无法在任何移动浏览器中响应

<meta name="viewport" content="width=device-width, initial-scale=1.0">
如果您支持IE9和IE8，则需要引用Modernizr库。您需要考虑一下您需要支持的浏览器
从html标记

如何使用bootstrap和css制作asp：按钮的宽度相同

1 个答案: