Question

我是twitter-bootstrap的新手，我想要做的就是更改navbar，使其没有borders或padding，当您悬停可选链接以突出显示不同的内容时background color。我还想要一个约10px的margin-left和margin-right，我无法工作？

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"             href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">       </script>
 <link href="https://fonts.googleapis.com/css?family=Catamaran:100|Luckiest+Guy|Quicksand:300|Asap:700|Montserrat:700|Open+Sans|Roboto|Signika:700" rel="stylesheet"/>

</head>
<body>

<style>

.navbar-default {   
 border: 0;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;
 background-color: #00a3fe;
 font-family: 'Quicksand', sans-serif;font-size: 14pt;font-weight: 800;width: 100%; valign: middle;color : #ffffff;

 }

.nav.navbar-nav.navbar-right li a {
color: #ffffff;
 }

.nav.navbar-nav.navbar-nav li a {
color: #ffffff;
}
</style>


<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
  <button type = "button" class = "navbar-toggle" 
     data-toggle = "collapse" data-target = "#example-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>

  <a class = "navbar-brand" href = "#">Company</a>
</div>

<div class = "collapse navbar-collapse" id = "example-navbar-collapse">

     <ul class="nav navbar-nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
  </ul>

     <ul class="nav navbar-nav navbar-nav">
    <li class="non-active"><a href="#">Sign up</a></li>
  </ul>
     <ul class="nav navbar-nav navbar-nav">
    <li class="non-active"><a href="#">Register</a></li>
  </ul>

     <ul class="nav navbar-nav navbar-nav">
    <li class="non-active"><a href="#">About</a></li>
  </ul>


  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Login</a>    </li>
    </ul>
  </div>

</nav>
</body>
</html>

Answer 1

你的CSS被bootstrap覆盖了。使用.navbar.navbar-default代替.navbar-default来提供您的css偏好。

要在nav周围设置一个边距，请将潜水包裹起来，然后以padding:0 20px;的方式给出nav，使得class="navbarcon"在左右两侧有20px的空间。（我已经给了div :hover你可以查找它的css）

要更改悬停时使用body,html{ width:100%; margin:0; padding:0; } .navbarcon{ width:100%; margin:0; padding:0 20px; background-color: #00a3fe; } .navbar.navbar-default { border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background-color: #00a3fe; font-family: 'Quicksand', sans-serif; font-size: 14pt; font-weight: 800; width: 100%; valign: middle; color : #ffffff; } .nav.navbar-nav.navbar-right li a { color: #ffffff; background-color:green; } .nav.navbar-nav.navbar-nav li a { color: #ffffff; background-color:green; } .nav.navbar-nav.navbar-right li a:hover { background-color:red; } .nav.navbar-nav.navbar-nav li a:hover { background-color:red; }伪类的链接背景。我在这里将背景设置为绿色，当您将鼠标悬停在它们上方时，它会变为红色。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="navbarcon">
<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
  <button type = "button" class = "navbar-toggle" 
     data-toggle = "collapse" data-target = "#example-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>

  <a class = "navbar-brand" href = "#">Company</a>
</div>

<div class = "collapse navbar-collapse" id = "example-navbar-collapse">

  <ul class="nav navbar-nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li class=""><a href="#">Sign up</a></li>
    <li class=""><a href="#">Register</a></li>
    <li class=""><a href="#">About</a></li>
  </ul>

  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Login</a></li>
    </ul>
  </div>
 </nav>
</div>

＆＃13;

Runnable mrHandlerRunnable = new Runnable() {
            @Override
            public void run() {
                ar.stop();
                short[] buffer = new short[minSize];
                Log.d("LEN: " , ""+buffer.length);
                ar.read(buffer, 0, minSize);
                int max = Integer.MIN_VALUE;
                int min = Integer.MAX_VALUE;
                Double avg = 0.0;
                for (short s : buffer)
                {
                    if (Math.abs(s) > max)
                    {
                        max = Math.abs(s);
                    }
                    if (Math.abs(s) < min)
                    {
                        min = Math.abs(s);
                    }
                    avg = avg+Math.abs(s);
                }
                avg = avg/buffer.length;

                ar.startRecording();

            }
        };
        mrHandler.postDelayed(mrHandlerRunnable, 60000);

＆＃13;

Answer 2

使用css悬停效果。在此处了解w3schools css hover 希望这有帮助！

导航栏和引导程序问题

2 个答案: