设置横幅背景颜色

时间:2014-02-25 15:16:03

标签: css twitter-bootstrap

我正在运行一个Play框架(使用scala)教程,并根据提到的内容设置css。我得到白色背景顶部横幅,而教程得到深色背景。我是css的新手,无法调试色差的原因。

main.css是

body { color:black; }
body, p, label { font-size:15px; }
.label { font-size:13px; line-height:16px; }
.alert-info { border-color:transparent; background-color:#3A87AD;
color:white; font-weight:bold; }
div.screenshot { width: 800px; margin:20px; background-color:#D0E7EF; }
.navbar-fixed-top .navbar-inner { padding-left:20px; }
.navbar .nav > li > a { color:#bbb; }

.screenshot > .container { width: 760px; padding: 20px; }
.navbar-fixed-top, .navbar-fixed-bottom { position:relative; }
h1 { font-size:125%; }
table { border-collapse: collapse; width:100%; }
th, td { text-align:left; padding: 0.3em 0;
border-bottom: 1px solid white; }
tr.odd td { }
form { float:left; margin-right: 1em; }
legend { border: none; }
fieldset > div { margin: 12px 0; }
.help-block { display: inline; vertical-align: middle; }
.error .help-block { display: none; }
.error .help-inline { padding-left: 9px; color: #B94A48; }
footer { clear: both; text-align: right; }
dl.products { margin-top: 0; }
dt { clear: right; }
.barcode { float:right; margin-bottom: 10px; border: 4px solid white; }

而主视图的主体是

<head>
    <title>@title</title>
    <link rel="stylesheet" type="text/css" media="screen"
        href='@routes.Assets.at("stylesheets/bootstrap.css")'>
    <link rel="stylesheet" media="screen"
        href="@routes.Assets.at("stylesheets/main.css")">
</head>

<body>
    <div class="screenshot">

        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                <a class="brand" href="@routes.Application.index()">
                    @Messages("application.name")
                </a>
                </div>
            </div>
        </div>
        <div class="container">
            @content
            @debug()
        </div>
    </div>
</body>

这就是它应该如何存在 tutorial

和我的页面 my page

我在书中找到了这个教程&#34;为Scala播放&#34;

2 个答案:

答案 0 :(得分:1)

<div class="navbar navbar-fixed-top">更改为<div class="navbar navbar-inverse navbar-fixed-top"&gt;

答案 1 :(得分:0)

bootstrap.css正在替换css main.css中的一些标签,你要做的就是将body.css放入体内{color:black important;!}