Question

好的，我正在使用Bootstrap的导航面板，我将它们与图像栏一起固定在顶部。问题是，无论我尝试什么，我都无法从中移除底部边框。这是代码：

user.update(name: session[:name])

标签和标题的HTML：

.header-wrapper {
font-family: 'Oswald', sans-serif;
}
.top {
background-color: #2960f7;
margin: 0;
padding: 5em 0 4em 0;
width: 100%;
position: fixed;
z-index: 999;
}

.top h1 {
    text-transform: uppercase;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
    color: #fff;
}

.nav-tabs {
border-bottom: none;
position: fixed;
top: 124px;
background-color: #2960f7;
color: #fff;
border-color: #fff;
z-index: 1000;
}

.nav-tabs .active {
    color: #2960f7;
}

.nav-tabs li a:hover {
    background-color: #fff;
    color: #2960f7;
}

.nav-tabs li, .nav-tabs li a {
    color: #fff;
}

当我看到它时，我看到Chrome中CSS元素中显示<div class="header-wrapper"> <div class="top"> <h1>Title</h1> </div> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="skillset.html">Skillset</a></li> <li><a href="history.html">Work History</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div>的行。

JSFiddle：https://jsfiddle.net/ghstet23/3/

长和短，如果将.nav-tabs {border-bottom: 1px solid #ddd}设置为.nav-tabs无法正常工作，如何让底部边框消失？

Answer 1

我必须将以下代码添加到head

<style>
  .nav-tabs { 
    border-bottom: none;
 }
</style>

Answer 2

如果您使用导航选项下方的下划线，则可以在css中使用text-decoration: none;，如下所示：

.nav-tabs li, .nav-tabs li a {
    color: #fff;
    text-decoration: none; /* Add this */
}

Answer 3

在bootstrap.min.css上有一个悬停

的边框

.nav-tabs>li>a:hover {
    border-color: #eee #eee #ddd;
}

加载bootstrap后在本地样式表上添加此选项以覆盖底部边框

.nav-tabs>li>a:hover {
    border-bottom-color:#fff;
}

删除底部的白色边框

.nav-tabs { border-bottom: none; }

在此处查看

JSFiddle

Answer 4

请记住，样式是继承的。从顶级父母开始屠宰它以找到你的异常。

例如，如果在包装器div内的div内部有div，并且您对包装器应用了边框，则两个内部div也将获得边框。

在那个例子中，如果你像“嘿wtf，我只希望父母有边框。”然后，你会添加“border：none;”两个内心的人。

一个人也会对以下内容感兴趣： http://www.w3schools.com/cssref/sel_element_gt.asp

例如：

 div > div > * {
   border: none;
 }

Select all child elements recursively in CSS

Bootstrap .nav-tabs border-bottom不会消失

4 个答案: