Question

我在带有导航栏的轨道上的ruby上有一个应用程序 - 带有品牌和项目名称的部分可以通过我的样式表更改，但是对于导航栏右侧部分。我尝试了很多引用：.navbar-right nav navbar-nav ul li a及其所有部分以及它们.active和<!DOCTYPE html> <html> <head> <title>Julinsecommerce</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <%= csrf_meta_tags %> </head> <body>  <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="projectName navbar-brand"> <a href="./index">ДЖУЛИН</a> </div>  </div>  <div class="navbar-collapse collapse"> <ul class="navbar-right nav navbar-nav"> <li class="active"> <a href="#home"> Home </a> </li> <li class="active"> <a href="#about"> About </a></li> <li class="active"> <a href="#contact">Contact </a></li> </ul> </div> </div>  </nav> <%= yield %> <footer> © 2017 Julin <p> <span class="glyphicon glyphicon-arrow-up"></span> <a href=#> Back to top </a> </footer> </body> </html>的所有组合。而且只是ul，我可能无法找到我必须使用哪个类或ID来使我的样式在正确的部分工作。

这是我的HTML：

    // Place all the styles related to the static_pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

html, 
body { 
  height: 100%;
}

body {
  position: relative;
  padding-top: 60px;
}

/***navbar***/

.navbar {
    background-color: #28c093;
    height: 5em;
}

.navbar-collapse collapse .navbar-right ul li a {
    color: #3234cd;
    background-color: #fff;
    letter-spacing: 0.05em;
    }

.navbar-nav li a:hover {
        color: #ff0;
    }

.projectName a {
    color: #3234cd;
    letter-spacing: 0.05em;
    padding-top: 1.1em;
    font-family: Helvetica,Arial,Georgia,serif;
    font-weight: bold;
}

.projectName a:hover {
    color: #1d5fd7;
}

/***h1***/
h1 {
    font-family: Helvetica,Arial,Georgia,serif;
    font-weight: bold;
    color: #3234cd;
    text-align: center;
}

.img-responsive hoian {
    display: inline-block;
    float: center;
    width: 60%;
    padding: 2em;
    border: red;
}

body > .container {
  padding: 60px 15px 0;
}

/***footer***/
footer {
    padding-top: 1em;
    font-family: Helvetica,Arial,Georgia,serif;
    color: #3234cd;
}

和我的CSS：

project/
    survey/
        __init__.py
        survey_state_machine.py
    tests/
        survey/
            __init__.py
            test_survey_state_machine.py

Answer 1

您忘记了

下的js ratings

Answer 2

<强>第一即可。你没有jQuery。 jQuery是bootstrap 所必需的（除非你只是使用他们的样式，如网格系统）。

添加jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<强>第二即可。我建议您为导航栏目标data-target="#my-navbar"使用id而不是class。

<强>第三即可。定位<a>（内容被保留的位置）以添加样式：

#my-navbar a {
  background: aqua;
}

＆＃13;

// Place all the styles related to the static_pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
html,
body {
  height: 100%;
}

body {
  position: relative;
  padding-top: 60px;
}


/***navbar***/

.navbar {
  background-color: #28c093;
  height: 5em;
}

.navbar-collapse collapse .navbar-right ul li a {
  color: #3234cd;
  background-color: #fff;
  letter-spacing: 0.05em;
}

.navbar-nav li a:hover {
  color: #ff0;
}

.projectName a {
  color: #3234cd;
  letter-spacing: 0.05em;
  padding-top: 1.1em;
  font-family: Helvetica, Arial, Georgia, serif;
  font-weight: bold;
}

.projectName a:hover {
  color: #1d5fd7;
}


/***h1***/

h1 {
  font-family: Helvetica, Arial, Georgia, serif;
  font-weight: bold;
  color: #3234cd;
  text-align: center;
}

.img-responsive hoian {
  display: inline-block;
  float: center;
  width: 60%;
  padding: 2em;
  border: red;
}

body>.container {
  padding: 60px 15px 0;
}

#my-navbar a {
  background: aqua;
}

/***footer***/

footer {
  padding-top: 1em;
  font-family: Helvetica, Arial, Georgia, serif;
  color: #3234cd;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Julinsecommerce</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>

    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

      <meta name="viewport" content="width=device-width, initial-scale=1">
      <%= csrf_meta_tags %>
</head>

<body>

  <!--navbar starts here-->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <div class="projectName navbar-brand">
          <a href="./index">ДЖУЛИН</a>
        </div>
        <!--end projectName -->
      </div>
      <!--end navbar-header -->
      <div class="navbar-collapse collapse" id="my-navbar">

        <ul class="navbar-right nav navbar-nav">
          <li class="active"> <a href="#home"> Home </a> </li>
          <li class="active"> <a href="#about"> About </a></li>
          <li class="active"> <a href="#contact">Contact </a></li>
        </ul>
      </div>
    </div>
    <!-- end nav container-->
  </nav>

  <%= yield %>

    <footer>
      &copy; 2017 Julin
      <p> <span class="glyphicon glyphicon-arrow-up"></span>
        <a href=#> Back to top </a>
    </footer>

</body>

</html>

＆＃13;

Navbar的CSS不起作用

2 个答案: