Visual Studio ASP.NET+Bootstrap3开发：文本框与按钮样式问题求助

嘿，刚好我之前也用Bootstrap 3做过ASP.NET项目，这两个问题其实都可以用Bootstrap自带类或者自定义CSS来解决，我给你拆解一下：

1. 让文本框靠右显示 #

首先优先用Bootstrap的内置类，省得写额外CSS：

• 把你的ASP.NET TextBox控件放在一个容器（比如<div>）里，给容器加上text-right类，这样容器内的元素就会靠右对齐：

<div class="text-right">
    <asp:TextBox ID="TextBox1" runat="server" CssClass="form-control"></asp:TextBox>
</div>

• 如果这种方式不生效（比如容器宽度没占满），可以给文本框本身加自定义CSS类，强制它靠右：

.right-input {
    display: block;
    margin-left: auto;
    /* 可选：设置文本框宽度，比如 width: 50%; */
}

然后给TextBox设置CssClass="form-control right-input"就行。

2. 修改提交按钮的颜色 #

Bootstrap的按钮默认有预设样式，但自定义颜色也很简单：

方式一：自定义按钮类（推荐，不破坏Bootstrap默认样式） #

写一个自己的按钮类，和Bootstrap的btn类一起用：

.btn-custom-submit {
    background-color: #2ecc71; /* 自定义背景色 */
    border-color: #27ae60; /* 边框色和背景色配套 */
    color: #fff; /* 文字颜色 */
}
/* 别忘了hover状态的样式，提升交互体验 */
.btn-custom-submit:hover {
    background-color: #27ae60;
    border-color: #229954;
    color: #fff;
}

然后给ASP.NET按钮设置CssClass="btn btn-custom-submit"。

方式二：覆盖Bootstrap默认按钮类 #

如果你用的是默认的btn-default，可以直接覆盖它的样式：

.btn-default {
    background-color: #e74c3c;
    border-color: #c0392b;
    color: #fff;
}
.btn-default:hover {
    background-color: #c0392b;
    border-color: #a93226;
}

不过这种方式会影响所有用了btn-default的按钮，要谨慎使用。

提醒一下：ASP.NET服务器控件一定要用CssClass属性来加样式类，不要直接写class，不然服务器端可能会忽略这个属性哦～

内容的提问来源于stack exchange，提问作者tubvajlis