css - bootstrap 3 上的透明导航栏

标签 css twitter-bootstrap

我想让导航栏透明,我有以下代码:

<div class="navbar navbar-default navbar-fixed-top" style="top:50px; background:transparent;">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav navbar-nav">
        <a class="navbar-brand">My Company</a>
        <li><a href="#">Home</a></li>
        <li><a href="#">Portofolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

所以我使用了background:transparent; 但结果是这样的:

enter image description here

顶部有一条白线,导航栏顶部有一条更大的白线。我怎样才能删除它?或者我怎样才能拥有透明的导航栏?

最佳答案

添加border:0;box-shadow:none

<div class="navbar navbar-default navbar-fixed-top">
      <div class="navbar-inner">  
            <div class="container">
                 <ul class="nav navbar-nav">   
                      <a class="navbar-brand">My Company</a> 
                      <li><a href="#">Home</a></li>
                      <li><a href="#">Portofolio</a></li> 
                      <li><a href="#">Contact</a></li>
                 </ul>  
           </div>
      </div>
</div>

更新 添加 CSS 的正确方法:

.navbar-default{
    background:none !important;
    border: 0;
    box-shadow:none !important;
    -webkit-box-shadow: none !important;
}

DEMO

关于css - bootstrap 3 上的透明导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22588137/

相关文章:

javascript - (CSS/jQuery) 如何使用 jQuery 解决 top 和 bottom 属性之间的冲突

html - Bootstrap 超大屏幕不调整

javascript - 在 React.js 中,如何使用 React-bootstrap 创建链接来更改事件选项卡?

css - bootstrap - 无缝跨度,响应式

css - doctype引起的布局问题

html - 如何在较小媒体上的 Bootstrap 中处理响应式图像?

css - 仅当其宽度超过容器的一半时才使用 Flexbox 收缩列

css - Z 索引不起作用

css - 无法摆脱 Navbar 元素的顶部/底部边距?

javascript - Twitter Bootstrap 导航图标加载器