如何從引導程序導航欄中刪除邊框底部

Question

我意識到這個問題的答案對某些人有用，但盡我所能，我無法刪除這個煩人的邊框。

我嘗試了以下 CSS：

.nav-container{
    border-width:0;
    box-shadow:none;
    background-color: aliceblue;
}
.navbar {
    background-color: #99ccff; 
    border: 0;
}

盡管背景顏色確實設置了，但邊框仍然存在。

這是網站。

索引.html：

 html, body { background-color: aliceblue; } .nav-container { border-width: 0; box-shadow: none; background-color: aliceblue; } .navbar { background-color: #99ccff; border: 0; }

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <header> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid nav-container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div style="display: inline-block"> <a class="navbar-brand" href="#"> <img id="logo" src="img/writers-tryst-logo-min.png" alt="logo" /> </a> <br/> <br/> <div id="shares" class="row"> <!-- Twitter --> <a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter"> <i class="fa fa-twitter"></i> </a> <!-- Facebook --> <a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook"> <i class="fa fa-facebook"></i> </a> <!-- StumbleUpon (url, title) <a href="http://www.stumbleupon.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn stumbleupon" title="stumble-upon"> <i class="fa fa-stumbleupon-circle"></i> </a> --> <!-- Reddit (url, title) <a href="http://reddit.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn reddit" title="reddit"> <i class="fa fa-reddit-square"></i> </a> --> <!-- LinkedIn --> <a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin"> <i class="fa fa-linkedin"></i> </a> <!-- Google Plus --> <a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus"> <i class="fa fa-google-plus"></i> </a> </div> </div> </div> <!--navbar-header--> <div class="collapse navbar-collapse" id="Writers-Tryst"> <ul class="nav navbar-nav"> <li class="active"><a id="homepage" href="#/"><i class="acctive glyphicon glyphicon-home fa fa-home"></i> Home</a> </li> <li><a href="#writers" id="writers-link" class="fa fa-book"> Writers</a> </li> <li><a href="#enablers" id="enablers-link" class="fa fa-thumbs-o-up"> Enablers</a> </li> <li><a href="#about" class="fa fa-info-circle"> About</a> </li> <li><a href="#privacy" class="fa fa-user-secret"> Privacy/Rules</a> </li> <li><a href="#contact" class="fa fa-envelope-o"> Contact</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a id="login" href="#log-in"><i class="fa fa-sign-in"></i> Log-In</a> </li> <li><a id="accounts-link" href="#accounts"><i class="fa fa-user hidden"></i> Create Account</a> </li> <li class="dropdown" data-toggle="popover" data-trigger="hover" data-placement="bottom"> <button class="btn btn-custom-primary dropdown-toggle fa fa-user" style="margin-top: 8px; color: white;" data-html="true" type="button" id="user-dropdown-link" data-toggle="dropdown"><span class="caret"></span> </button> </a> <ul class="dropdown-menu" role="menu" data-aria-labelledby="create-account-link"> <li><a id="update-profile" href="#update-profile" class="fa fa-database"> Update profile</a> </li> <li><a id="manage-uploads" href="#manage-uploads" class="fa fa-book"> Manage uploads</a> </li> <li><a id="review-submissions" href="#review-submissions" class="fa fa-book"> Review Submissions</a> </li> <li><a id="update-submissions" href="#update-submissions" class="fa fa-book"> Update Reviews</a> </li> </ul> </li> <li> <a id="reset-pwd-link" href="#reset-pwd"></a> </li> </ul> </div> <!--navbar-collapse--> </div> <!--container fluid--> </nav> </header> <div> <div id="message" class="alert mt-10 mb-10"></div> <div id="main" class="content container"> <!-- angular templating --> <!-- this is where content will be injected --> <div data-ng-view></div> </div> <footer class="panel panel-default panel-transparent"> <div id="footer" class="text-right small">&#169; 2016 Ronald Tornambe, Inc.</div> </footer> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

bootstrap 主題添加了一個框陰影。 當導航低於 768px 時，以下規則將刪除它以及.navbar-collapse類。

注意：您在fa fa-user按鈕之后有一個流浪標簽，並且（可能）使用normalize.css兩次，因為 Bootstrap3 使用了它的一個版本。 請參閱normalize.less 。

.navbar.navbar-default {
    background-color: #99ccff;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar.navbar-default .navbar-collapse {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

在使用 box-shadow 之前：

移除 box-shadow 后：

工作示例：

 /*FOR DEMO ONLY*/ html, body { background: aliceblue; } /*FOR DEMO ONLY*/ .nav-container { border-width: 0; box-shadow: none; background-color: aliceblue; } .navbar.navbar-default { background-color: #99ccff; border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar.navbar-default .navbar-collapse { border: 0; -webkit-box-shadow: none; box-shadow: none; }

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <header> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid nav-container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div style="display: inline-block"> <a class="navbar-brand" href="#"> <img id="logo" src="https://writers-tryst.com//img/writers-tryst-logo-min.png" alt="logo" /> </a> <br/> <br/> <div id="shares" class="row"> <a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter"> <i class="fa fa-twitter"></i> </a> <a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook"> <i class="fa fa-facebook"></i> </a> <a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin"> <i class="fa fa-linkedin"></i> </a> <a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus"> <i class="fa fa-google-plus"></i> </a> </div> </div> </div> <div class="collapse navbar-collapse" id="Writers-Tryst"> <ul class="nav navbar-nav"> <li class="active"><a id="homepage" href="#/"><i class="acctive glyphicon glyphicon-home fa fa-home"></i> Home</a> </li> <li><a href="#writers" id="writers-link" class="fa fa-book"> Writers</a> </li> <li><a href="#enablers" id="enablers-link" class="fa fa-thumbs-o-up"> Enablers</a> </li> <li><a href="#about" class="fa fa-info-circle"> About</a> </li> <li><a href="#privacy" class="fa fa-user-secret"> Privacy/Rules</a> </li> <li><a href="#contact" class="fa fa-envelope-o"> Contact</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a id="login" href="#log-in"><i class="fa fa-sign-in"></i> Log-In</a> </li> <li><a id="accounts-link" href="#accounts"><i class="fa fa-user hidden"></i> Create Account</a> </li> <li class="dropdown" data-toggle="popover" data-trigger="hover" data-placement="bottom"> <button class="btn btn-custom-primary dropdown-toggle fa fa-user" style="margin-top: 8px; color: white;" data-html="true" type="button" id="user-dropdown-link" data-toggle="dropdown"><span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" data-aria-labelledby="create-account-link"> <li><a id="update-profile" href="#update-profile" class="fa fa-database"> Update profile</a> </li> <li><a id="manage-uploads" href="#manage-uploads" class="fa fa-book"> Manage uploads</a> </li> <li><a id="review-submissions" href="#review-submissions" class="fa fa-book"> Review Submissions</a> </li> <li><a id="update-submissions" href="#update-submissions" class="fa fa-book"> Update Reviews</a> </li> </ul> </li> <li> <a id="reset-pwd-link" href="#reset-pwd"></a> </li> </ul> </div> </div> </nav> </header> <div> <div id="message" class="alert mt-10 mb-10"></div> <div id="main" class="content container"> <div data-ng-view></div> </div> <footer class="panel panel-default panel-transparent"> <div id="footer" class="text-right small">&#169; 2016 Ronald Tornambe, Inc.</div> </footer> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 2

只需應用box-shadow: none; 在導航欄中

Answer 3

您對 .navbar-default 元素上的 CSS box-shadow 屬性有幾個聲明。 如果您刪除所有這些邊界將消失。

Answer 4

對我有用的唯一解決方案是使用!important屬性內聯 css：

border: none !important; outline: none !important;

導航欄切換器內：

 <button class="navbar-toggler" style="border: none !important;  outline: none !important;"
    type="button" data-toggle="collapse" data-target="#collapsingNavbar">