logo标签列表

如何更改Bootstrap的well颜色？

htmlcsstwitter-bootstrapbackground-color
24

我一直在尝试更改Bootstrap中well组件的颜色，但是并没有起作用。我已经尝试将图片设置为背景（well组件的背景），这种方法可以实现，但不符合我的需求。以下是我的HTML代码：

<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Default.aspx
 </title>
<script src="Scripts/jquery-1.11.0.js" type="text/javascript"></script>    
<link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="Styles/bootstrap-theme.css" rel="stylesheet" type="text/css" />   
<link href="Styles/Default.css" rel="stylesheet" type="text/css" /> 
<script src="Scripts/bootstrap.js" type="text/javascript"></script>    
<script src="Scripts/Default.js" type="text/javascript"></script>
</head>
<body>
<div class="well well-lg"><h1 class="">TIDE File Generation</h1></div>
<div id="mainNavigator">
    <ul class="nav nav-tabs">
      <li><a href="/TideFileGeneration.aspx">Validate file</a></li>
      <li><a href="/ImportCatalogs.aspx">Catalogs</a></li>
      <li><a href="/InvoiceHistory.aspx">View History</a></li>
      <li><a href="/Reports.aspx">Reports</a></li>
    </ul>
</div>
 </body>
 </html>

这是我的 CSS 代码：

.well{
background-color: rgb(22, 105, 173);
}

在Default.css文件中。

谢谢并致以问候。

3
这不起作用吗？http://jsfiddle.net/sVQsg/ - Jason Sperske
不，我的意思是，我可以改变一切，但不能改变颜色。我认为我的语法有问题，或者可能不是应该更改颜色的地方。 - j.rmz87
我明白了，伙计们：<link href="Styles/bootstrap-theme.css" rel="stylesheet" type="text/css" /> 不应该在那里。非常感谢。 - j.rmz87
1
我有点困惑，但很高兴你找到了一些有用的东西。以防万一你在旧版IE中进行测试，请注意背景颜色错误：http://css-tricks.com/ie-background-rgb-bug/ - Jason Sperske
谢谢。我之前从未听说过这个，但我按照Micallef所说的做了（在他说之前），这就是我发现有问题的方式。谢谢@JasonSperske。 - j.rmz87
可能是重复的问题：Twitter Bootstrap - Well 背景颜色。 - tumultous_rooster
4个回答
50

Bootstrap 3：

设置背景属性而不是背景颜色。

.well {
    background: rgb(22, 105, 173);
}
谢谢！有人知道well类的默认十六进制颜色是什么吗？ - tumultous_rooster
2
背景颜色: #f5f5f5 - Ravi
@MattO'Brien 另外，这里有一个在线的rgb()颜色选择器链接。 - Pathros
我找到了这个页面，帮助我选择我想要的颜色。 - Pathros
7

应该可以。

尝试在Chrome中检查元素，确定是否有其他CSS覆盖了background-color。默认情况下，.well已经包含了background-color - 请确保您正在替换它。

4
您可以在默认CSS中使用!important来覆盖背景颜色。
.well{
background-color: cyan !important;
}

那对我来说有效。

-4

你可以在声明well的div中添加样式。

你的代码：

<div class="well well-lg"><h1 class=""> TIDE File Generation</h1></div>

建议的代码：
<div class="well well-lg" style="background-color: (color of choice);">
    <h1 class=""> TIDE File Generation</h1>
</div>`
4
虽然这样做可以“解决”问题，但这会违背CSS（层叠样式表）的初衷。而且，他的问题在于CSS语法，并非“div定位”。 - Bonatti
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接