html - 无法删除边框轮廓

Question

我正在使用 Bootstrap 导航栏并试图摆脱边框，但它没有成功!

.navbar
{
	height: 100px;
}

.navbar-default
{
	/*background-color: #0050A0;*/
	background-color: white;
	border-radius: 0;
	-moz-border-radius: 0;
	border-color: none;
	border: 0 !important
	background: -moz-linear-gradient(left, white 0%, white 45%, #12A8E0 85%, #0050A0 100%);

}

.flash_navbar a
{
	color: black !important;
}

.search_form
{
	width: 70%;
}

.nav_form
{
	border-radius: 0;
	margin-top: 27px;
}

#searchBar
{
	border-color: #0050A0;

}

#searchButton
{
	background-color: #0050A0;
	color: white;
	border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  	<link href="https://fonts.googleapis.com/css?family=Open Sans" rel="stylesheet" type="text/css">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <div class="flash_navbar">
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" id="collapse_button" data-toggle="collapse" data-target="#myNavbar">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="/"></a>
				</div>

					<form class="search_form" action="/product/search" method="POST">
						<div class="input-group">
							<input type="text" class="form-control nav_form" placeholder="Search" id="searchBar" />
							<div class="input-group-btn">
								<button class="btn btn-default nav_form" type="submit" id="searchButton">
								<i class="glyphicon glyphicon-search"></i>
								</button>
							</div>
						</div>
					</form>
				
			</div>
		</nav>
	</div>

这是我浏览器中的实际结果。 Snipplet 似乎没有给出正确的结果。

我想删除它的轮廓或边框

Answer 1

Bootstrap 类覆盖了您的类。试试这个。

.flash_navbar .navbar {
    border: 1px solid transparent;
}

通过这样做，您可以通过容器定位类，从而呈现新代码。