Question

我在引导导航栏中的项目居中时遇到了麻烦。我目前正在使用bootstrap 3。我阅读了很多帖子并尝试了我能想到的一切，但没有任何作用。我也尝试使用＆＃39; hover＆＃39;在项目的顶部显示蓝线，但我无法将其缩小。这是我的代码。

＆＃13;

.navbar {
  background-color: transparent;
  padding-top: 30px;
  /* border: 0; */
}

.navbar a {
  font-size: 15px;
  color: black;
  text-transform: uppercase;
  font-family: Ruda, sans-serif;
}

.navbar-brand {
  max-height: 40px;
}

.navbar-nav>li {
  display: inline-block;
  float: none;
  padding-right: 80px;
}

.navbar-nav>li:hover {
  border-top: 1px solid blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
      <li><a href="#">Page 4</a></li>
      <li><a href="#">Page 5</a></li>
    </ul>
  </div>
</nav>

＆＃13;

Answer 1

要覆盖bootstrap中的某些类，必须使用@media规则。此外，我改变了悬停时的行为，只改变颜色而不是所有边框。它会避免闪烁。

＆＃13;

@media (min-width: 768px){
    ul.navbar-nav{
        table-layout: fixed;
        display: table;
        margin: 0 auto;
        float: none;
    }
}

.navbar 
{
  background-color: transparent;	
  padding-top: 30px;
}


.navbar a
{
  font-size: 15px;
  color: black;
  text-transform: uppercase; 
  font-family: Ruda, sans-serif;
}

.navbar-brand
{
  max-height: 40px;
}

.navbar-nav > li {
    display: inline-block;
    float:none;
  padding-right:80px;
  border-top: 1px solid transparent
}

.navbar-nav > li:hover
{
  border-top-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
  <div class="navbar-header" >
    <a class="navbar-brand" href="#">WebSiteName</a>
  </div>
  <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#">Page 5</a></li>
  </ul>
  </div>
</nav>

＆＃13;

Answer 2

我不确定我是否理解你的问题，但你刚刚删除了＆＃34; .navbar-nav li＆＃34;并且蓝线较小，文本居中

＆＃13;

.navbar 
{
  background-color: transparent;	
  padding-top: 30px;
  /* border: 0; */
}


.navbar a
{
  font-size: 15px;
  color: black;
  text-align:center !important;
  text-transform: uppercase; 
  font-family: Ruda, sans-serif;
}

.navbar-brand
{
  max-height: 40px;
}

.navbar-nav > li {
    display: inline-block;
    float:none;
}

.navbar-nav > li:hover
{
  border-top: 1px solid blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
  <div class="navbar-header" >
    <a class="navbar-brand" href="#">WebSiteName</a>
  </div>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Home</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#">Page 5</a></li>
  </ul>
  </div>
</nav>

＆＃13;

无法居中导航栏项目和悬停标记

2 个答案: