如何使用 bootstrap 和 css 使 asp:buttons 宽度相同答案

【问题标题】：How to make asp:buttons same width with bootstrap and css如何使用 bootstrap 和 css 使 asp:buttons 宽度相同
【发布时间】：2017-03-09 16:06:46
【问题描述】：

我正在使用引导程序制作一个 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;
}

【问题讨论】：

编辑：如果我将它放在我制作的样式区域的同一个文件中，它就可以工作。但不是当我尝试链接css文件时。我知道它自己工作的 CSS 文件，因为另一个页面正在使用该文件上的其他类，因此它确实正确链接。
我对我的长答案做了几处编辑。我完全不能良心发布一个快速破解，因为你的方法有太多问题。按照这些步骤（可能省略母版页位），您将处于一个更好的位置。随时提问。
如果您指定您正在使用的 ASP.NET 版本以及 Bootstrap 版本，将会有所帮助。
@IrishChieftain 嗨，感谢您的提示。正如您所知，这是我第一次做这个。 asp.net 版本是 VS 2015 的 v4.6.1，Boostrap 是最新的 3.3.7。我将查看引导类/从最低版本更改并查看母版页。
很高兴为您提供帮助。我询问 Bootstrap 版本的原因是因为版本 2 是桌面优先，而版本 3 是移动优先（更好）。如果您有任何问题，请随时 :)

标签： c# css asp.net twitter-bootstrap

【解决方案1】：

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

这里有一些步骤可以帮助您找到正确的方向：

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

.NameOfBootstrapButtonClass { 宽度：25%； }
将您的脚本链接移动到结束正文标记之前
删除所有内联 CSS 和 CSS 链接 - 然后从解决方案资源管理器中将所需的 CSS 文件拖到 ASP 页面的头部。这可以保证您的链接是正确的，但仅适用于您使用 VS
不要在开发中使用缩小的 CSS 文件 - 部署时，您将捆绑所有最小版本以提高性能。就个人而言，我在本地工作时注释掉了 BundleConfig 类的 RegisterBundles 方法中的大部分捆绑
如果您正在构建一个网站，如果没有明智地使用母版页和用户控件，您将会有很多冗余
您的头部没有 viewport 标记，因此您的网站在任何移动浏览器中都不会响应

<meta name="viewport" content="width=device-width, initial-scale=1.0">
如果您支持 IE9 和 IE8，则需要参考 Modernizr 库。你需要考虑一下你需要支持哪些浏览器
从 html 标记中删除 xmlns 命名空间属性

【讨论】：