twitter-bootstrap – Bootstrap导航栏品牌重量根据Safari中的下拉菜单而变化

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – Bootstrap导航栏品牌重量根据Safari中的下拉菜单而变化前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
非常令人沮丧的问题,我无法弄清楚.仅在Safari中注意到,当我在固定导航栏中触发下拉列表时,导航栏中所有文本的字体粗细都会发生变化,包括品牌文字.

这是导航栏的屏幕截图

之后:

我已经在导航栏文本和自定义CSS下面添加了.谢谢你的帮助!

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <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>
     <a class="navbar-brand" href="/">Midge Raymond</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="hidden-sm"><a href="/">home</a></li>
        <li><a href="/bio.html">bio</a></li>
        <li class="dropdown">
          <a href="/books"  class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="500">books <b class="caret"></b></a>
          <ul class="dropdown-menu">
                            <li><a href="/books/mylastcontinent.html">My Last Continent</a></li>
                            <li><a href="/books/forgettingenglish.html">Forgetting English</a></li>
                            <li><a href="/books/everydaywriting.html">Everyday Writing</a></li>
                            <li><a href="/books/everydaybookmarketing.html">Everyday Book Marketing</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="/books"  class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="500">other writing <b class="caret"></b></a>
          <ul class="dropdown-menu">
                            <li><a href="/otherwriting/articles.html">Articles</a></li>
                            <li><a href="/otherwriting/shortstories.html">Short Stories</a></li>
          </ul>
        </li>

        <li><a href="/news.html">news & events</a></li>
        <li class="hidden-sm"><a href="/blog">blog</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

和CSS:

.navbar {
         min-height: 100px;
         padding-top: 15px; 
         margin-bottom: 5px;
         padding-left: 0px;
}

.navbar-toggle {
         margin-top: 40px; 

}

.navbar-brand {
        font-family: 'EB Garamond','Garamond',serif;
        font-size: 52px;
        margin-top: 15px; 
        margin-bottom: 10px; 
        text-align: center;
        font-weight: normal;
}

@media (max-width: 768px) {
  .navbar-brand {
        font-family: 'EB Garamond',serif;
        font-size: 34px;
  }
  .navbar-toggle {
    margin-top: 15px; // Adjust toggle position
  }
  body { padding-top: 110px; }

}


.navbar-default .navbar-brand {
          color: #ffffff;
          font-weight: normal;
}

.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus {
  color: #488A87;
  background-color: transparent;
}

.navbar-default {
        background-color: #073949;
        border-color: #aaaaaa;
}

.navbar-default .navbar-nav > li > a {
        color: white;
        font-size: 17px;
        padding-top: 10px;
}

.navbar-inverse .navbar-brand {
  color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover {
        background-color: #E5E5E5;
}

@media (min-width:1024px) { 
        .navbar > .container {
            text-align: center;
        }
        .navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li {
            float: none;
            display: inline-block;
        }
        .collapse.navbar-collapse {
            float: none;
            width: auto;
            clear: none;
            text-align: center;
        }
}

.dropdown-menu {
        background: #f9f9f5;
}

解决方法

您需要将以下内容添加到CSS文件中以解决此问题.这是一个字体平滑问题,发生在position:fixed和Safari.
.navbar-fixed-top {
   -webkit-font-smoothing: antialiased;
}

您可以找到有关此修复的更多详细信息及其发生原因here.

JSFiddle:https://jsfiddle.net/7njwmd1a/

原文链接:https://www.f2er.com/bootstrap/447204.html

猜你在找的Bootstrap相关文章