边框轮廓无法删除

时间:2017-04-27 14:37:28

标签: html css twitter-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>
&#13;
&#13;
&#13;

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

Actual navbar

我想删除它的轮廓或边框

4 个答案:

答案 0 :(得分:1)

Bootstrap类正在覆盖你的。试试这个。

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

通过这样做,您可以通过容器来定位该类,从而使您的新代码呈现。

答案 1 :(得分:1)

简单 #include <stdio.h> int swap1(int ,int ); int swap2(int* ,int* ); int swap3(int ,int ); int swap4(int, int); int swap1(int a,int b) { int temp=a; a=b; b=temp; printf("swapped with 3rd variable :%d, %d\n", a,b); } int swap2(int *a,int *b) { int temp = *a; *a = *b; *b = temp; printf("swapped with pointer :%d, %d\n", *a,*b); } int swap3(int a,int b) { a+=b; b=a-b; a-=b; printf("swapped with 2 variable :%d, %d\n", a,b); } int swap4(int a,int b) { a=a^b; b=a^b; a=a^b; printf("swapped with bitwise operation :%d, %d\n", a,b); } int main() { int ch; int a=3; int b=4; printf("enter the option from 0 to 3\n"); scanf("%d",&ch); int (*swap[4])(int, int) ={swap1,swap2,swap3,swap4};// function pointer /*can we pass something like int(*swap[4]( condition statement for 'pointer to variable' or 'variable')*/ if (ch==1)// at '1' location, swap2 is called. { (*swap[ch])(&a,&b);//passing the addresses } else { (*swap[ch])(a,b); } return 0; } 应该有效

使用&#34;检查元素&#34;在Chrome或它的替代方案应该可以帮助您找到正确的CSS选择器来实现所需的更改

答案 2 :(得分:1)

检查这块css:

.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%);

}

注意!important之后丢失的分号?这会弄乱你的css。解决这个问题。

答案 3 :(得分:1)

导航栏边框宽度和样式在导航栏类中定义,而不是navbar-default。在浏览器上,您可以通过检查元素来检查这一点(在chrome上,您可以单击计算样式进行验证)。您需要覆盖的只是首先定义它的类。这样,您甚至不需要使用!important

.navbar
{
    height: 100px;
    border: none;
}

.navbar-default {
    ...
}

Navbar border defined on .navbar class