Question

我使用R和shiny创建一个显然使用bootstrap CSS的网页。我没有使用bootstrap的经验，但是从几年前开始使用css。

我现在有一个像：

这样的结构

<div class="navbar navbar-static-top">
  <div class="navbar-inner">
    <div class="container">
      <span class="brand pull-left"></span>
      ....
    </div>
  </div>
</div>

我希望完整的导航栏具有不同的颜色。如何访问此div容器＆＃34; navbar navbar-static-top＆＃34;？！我不知道如何引用中间有空格的CSS代码......

Answer 1

您引用的空间用于为元素分配多个类。您可以使用其中一个类或两者来选择它。

.navbar {
}

.navbar-static-top {
}

.navbar,
navbar-static-top {
}

是根据所需特异性选择导航栏的所有可接受方式。请记住，你的CSS必须出现在bootstrap CSS之后才能覆盖引导样式。

使用Sass或Less并将引导类扩展到您自己的类是一种更好的做法，但目前这可能略高于您的知识。

Answer 2

只需添加一个自定义类，比如navbar-custom并将更改应用于自定义类，而不是修改defualt类。像这样：

HTML：

<div class="navbar navbar-custom navbar-static-top">
  <div class="navbar-inner">
    <div class="container">
      <span class="brand pull-left"></span>
      ....
    </div>
  </div>
</div>

CSS：

.navbar-custom    {
    background-color: red;
    --other custom properties--
    --other custom properties--
}

CSS：如何更改引导程序导航栏背景颜色

2 个答案: