Question

所以我使用bootstrap和HTMl样板来启动一个站点。我在编写bootstrap品牌类时遇到了问题。在main.css中我添加了一个.navbar .brand类，我试图将float更改为top。当我在浏览器中加载我的网页时，main.css中的.navbar .brand是空白的（根据firebug）。我可以在使用firebug的同时编辑bootstraps浮点值到顶部，但我似乎无法使用我自己的样式表覆盖。

    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="css/main.css">        
    .
    .
    .
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="">Alex</a>

在bootstrap.css中

.navbar .brand {
  display: block;
  float: left;
  padding: 17px 20px 17px;
  margin-left: -20px;
  font-size: 20px;
  font-weight: 200;
  color: #ffffff;
  text-shadow: 0 1px 0 #013435;
}

在main.css中

.navbar .brand {
  float: top;
}

当我看到元素

时，然后在萤火虫中

.navbar .brand {        main.css (line 27)
}

Answer 1

问题是float:top不是有效规则。因此，浏览器会识别选择器，但不识别您应用的规则。

这些是float的可能值：

float: left
float: right
float: none
float: inherit

有用的文章：https://developer.mozilla.org/en-US/docs/CSS/float

Answer 2

float不能是top。浮动仅用于水平对齐项目。

也许position:relative + position:absolute技术会为您做到：Position absolute but relative to parent

网站上缺少CSS

2 个答案: