Question

我读过很多时间，如果你在自己的CSS样式表中定义一个bootstrap类，你将覆盖它们，这样你创建的元素就会有你想要的预定义样式。

虽然这对于页面的一半是正确的，但是我的输入按钮使用了form-control类它只是不起作用，我无法弄清楚原因，就像其他任何人一样有这个问题。

这是我的问题的片段：

＆＃13;

var searcher = document.getElementById('buscador');

searcher.addEventListener("click", function()
{
	var master = searcher.parentNode;
	searcher.removeChild(searcher.childNodes[0]);
	searcher.style.animationName = "expandismo";
	searcher.style.animationDuration = "1s";
	setTimeout(function(){
		master.removeChild(searcher);
		var barraSearch = document.createElement('input');
		barraSearch.setAttribute('type', 'text');
		barraSearch.setAttribute('id', 'barraSearch');
		barraSearch.setAttribute('class', 'form-control');
		barraSearch.setAttribute('placeholder', 'Buscar...');
		var spanCheto = document.createElement('span');
		var botonCheto = document.createElement('button');
		var secondSpan = document.createElement('span');
		spanCheto.setAttribute('class', 'input-group-btn');
		botonCheto.setAttribute('class', 'btn btn-default');
		secondSpan.setAttribute('class', 'glyphicon glyphicon-search');
		secondSpan.setAttribute('aria-hidden', 'true');
		botonCheto.appendChild(secondSpan);
		spanCheto.appendChild(botonCheto);



		master.appendChild(barraSearch);
		barraSearch.focus();

	}, 1000);
	
}, false);

＆＃13;

.container-fluid
{
	text-align: center;
}
#toplane
{

	color: white;
	background-image:  url(citybackground.jpg);
	background-size: 100% 100%;
	min-height: 400px;
}
#botlane
{

}
#headone
{
	margin-top: 130px;
	color: black;
	text-shadow: 0px 0px 12px white, 0px 0px 8px white, 0px 0px 3px white, 0px 0px 5px white;
	font-family: "Times New Roman", Times, monospace;
	font-size: 60px;
}
#buscador
{
	color: #595959;
	width: 40px;
	height: 40px;
	border-radius: 18px;
	background-color: lightgrey;
	cursor: text;
}
#buscador:hover
{
	background-color: lightgrey;
	opacity: 1;
}
#buscador:active
{
	background-color: white;
}
.input-group
{
	width: 100%;
	text-align: center;
}
.form-control
{
	width: 70%;
	border-radius: 18px;
	background-color: lightgrey;
	height: 40px;
	padding-left: 10px;
	font-size: 20px;
	color: black;
}
.form-control:focus
{
	box-shadow: 0px 0px 5px #66d9ff;
	box-shadow: 0px 0px 10px #66d9ff;
	box-shadow: 0px 0px 8px #66d9ff;
	box-shadow: 0px 0px 12px #66d9ff;
}
@keyframes expandismo
{
	from{width: 40px}
	to{width: 70%}
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Price Surfer FAQ</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">

	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<link rel="stylesheet" type="text/css" href="wean1.css">
	
</head>
<body>
<div class="container-fluid" id="toplane">
	<h1 id="headone">PRICE SURFER FAQ</h1>
	<div class="input-group">
		<button id="buscador"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
	</div>
</div>
<div class="container-fluid" id="botlane">
	
</div>
<script type="text/javascript" src="wean1.js"></script>
</body>
</html>

＆＃13;

Answer 1

.container-fluid .input-group .form-control{
   /* yous css*/
}

这是因为引导程序使.form-control得到两个clases，这种类型的选择.input-group .form-control比.form-control更强

.input-group .form-control{

}

使用此website计算哪个选择器更强。

选中此屏幕截图，第一个选择器有3个点，第二个选择器只有两个，所以在第一个选择器的位置比第二个选择器强的情况下并不重要。每个id有100个点，类有10个点，标签有1个点

Answer 2

您应该使用未被挑选的属性添加！important。像：

.form-control
{
    width: 70%!important;
    border-radius: 18px!important;
    background-color: lightgrey!important;
    height: 40px;
    padding-left: 10px;
    font-size: 20px;
    color: black;
}

为什么我的样式表没有覆盖bootstrap？

2 个答案: