How do you tell which css class to modify?[Example inside]
我正在使用bootstrap,并且我有例如以下代码片段:
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">Symptoms</a>
<li class="divider-vertical"></li>
</li>
<li>
<a href="#">Services</a>
<li class="divider-vertical"></li>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
As rsn said in a comment, the best way is to install a developer tool that comes with the browsers. I personally like the Chrome one but the Firefox one works well too. You can select an individual item on your page using the select icon (arrow pointing to a box) and see what styles are attached to it. If you're trying to change padding, look at which element on your page has the padding, and then change that class.
Add an Id to the one you want to edit. Id overrules classes making the site then use the styling of the id instead of the class. Or edit starting with .navbar and add classes after that... Eg: .navbar{...} or .navbar .navbar-header .navbar-brand{...}
如果您希望子菜单(症状,服务,联系人)中心对齐,则可以在UL上使用Bootstrap的文本中心帮助程序类,如下所示:
<ul class="nav navbar-nav text-center">
链接地址: http://www.djcxy.com/p/69018.html
上一篇: 导航栏