Question

我一直在尝试使用CSS编辑Bootstrap Dropdown菜单，但无法使其正常工作。我已经编辑了其他预制的Bootstrap材料，但我遇到了这个问题。我尝试通过CSS定位各种元素，但没有出现任何变化（除了＆＃34; .caret＆＃34;）。我需要的只是改变文本颜色或下拉菜单背景颜色的基本内容。所有帮助都非常感谢。

Answer 1

您需要了解CSS特异性。 bootstrap.css中使用的CSS选择器比.btn或.dropdown更具体。因此，要覆盖它们，CSS中的选择器必须与bootstrap.css一样或更具体。

.btn.btn-default {
    color: blue;
}

.dropdown-menu>li>a {
    color: pink
}

http://www.bootply.com/pBc3gP18DA

Answer 2

你在这里遇到了一些问题 -

首先，您尝试使用类选择器<button>定位.button的元素 - 这不会匹配任何内容。

其次，你需要理解CSS Specificity - 基本上，更具体的CSS规则胜过不那么具体的规则 - 无论顺序如何。在这种情况下，您可以打开开发人员工具并检查元素以查看实际上您的样式实际上是在Bootstrap库文件之前声明的内容 - 因为它们是最后一个，它们会覆盖以前的样式并成为应用的样式。

但是 - 正如您在我的代码片段中看到的那样，您可以在div中添加父类，并将其包含在元素的CSS定位中 - 瞧！选择器中的两个类比一个更具体，并且您的CSS规则优先！

.my-very-special-dropdown .btn-default {
	color: red;
}

<link rel="stylesheet" type="text/css" href="DROPDOWN.css">

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>



<body>
   <div class="dropdown my-very-special-dropdown">
   		<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
   			<span class="caret"></span>
   		</button>
   		<ul class="dropdown-menu">
			<li><a tabindex="-1" href="#">HTML</a></li>
			<li><a tabindex="-1" href="#">CSS</a></li>
			<li>
        	<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
				<ul class="dropdown-menu">
				<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
				<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
        		</ul>
			</li>
    	</ul>
  	</div>


<script>
$(document).ready(function(){
  $('.dropdown a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

</body>
</html>

CSS可以感觉有点随意，但是一旦你感觉到规定它的一小组规则，它实际上变得相对容易。确保做一点阅读，并熟悉浏览器中的开发人员工具 - 特别是检查和样式。祝你好运！

Answer 3

我认为你可以专门选择你的元素。我认为这会有所帮助

merge

Answer 4

您可以在bootstrap.css文件中查看，然后找到下拉样式。从那里，您可以看到如何遍历下拉菜单的特定部分。您可以尝试在那里更改，复制，粘贴到您自己的样式，然后撤消对引导文件的更改

Answer 5

我通常是通过分配ID S

来完成的

我没有改变你所有的css只是更改了其中的2个 -

检查代码段

#dd1 {
	color: red;
}

#mybtn {
	color: red;
}

.caret {
	color: red;
}

.test {
	color: red;
}

li {
	color: blue;
}

a {
	color: blue;
}

.btn-default {
	color: blue;
}

li a {
	color: red;
}

<link rel="stylesheet" type="text/css" href="DROPDOWN.css">

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>



<body>
   <div id="dd1" class="dropdown">
   		<button id="mybtn" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
   			<span class="caret"></span>
   		</button>
   		<ul class="dropdown-menu">
			<li><a tabindex="-1" href="#">HTML</a></li>
			<li><a tabindex="-1" href="#">CSS</a></li>
			<li>
        	<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
				<ul class="dropdown-menu">
				<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
				<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
        		</ul>
			</li>
    	</ul>
  	</div>


<script>
$(document).ready(function(){
  $('.dropdown a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

</body>
</html>

这种方法的一个优点是你不要覆盖bootstrap css。如果您需要在页面的其他portio中使用本机css而无需进一步调整。

希望这有帮助！

Answer 6

您可以使用开发人员工具（F12）来检查您的css是否有效，并且您可以更好地优化您的CSS样式，例如将类添加到类似元素以控制其样式。只有使用元素选择器可能会影响HTML页面中的相同元素。

如何在Bootstrap的下拉菜单中编辑CSS？

6 个答案: