你怎么知道要修改哪个css类？[里面的例子]答案

【问题标题】：How do you tell which css class to modify?[Example inside]你怎么知道要修改哪个css类？[里面的例子]
【发布时间】：2016-09-22 00:12:44
【问题描述】：

我正在使用引导程序，例如这个代码 sn-p ：

 <!-- 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>

我可以看到 navbar、navbar-inverse、navbar-fixed-top、container、navbar-header、navbar-toggle、sr-only、icon-bar、navbar-brand、collapse、navbar-collapse、nav navbar-导航等...

所以 - 假设我想将此代码中的列表对齐到中心。在 12 多个类中，我必须使用 text-align 修改哪个类？有没有办法通过 div 来“回溯”以查看要更改的内容？直接包含列表的类是 nav navbar-nav，但如果我更改： .navbar-nav > li > a 包括文本对齐：中心；，什么都没发生。这一定意味着我换错了班级。

如果您知道确定要更改哪个类的方法，我将不胜感激！

谢谢。

【问题讨论】：

熟悉 FireFox 的 Firebug 或 Chrome 的开发工具，以直观地回答诸如此类的问题；它会让你的生活更轻松。

标签： html css twitter-bootstrap

【解决方案1】：

正如 rsn 在评论中所说，最好的方法是安装浏览器附带的开发工具。我个人喜欢 Chrome 的，但 Firefox 的也很好用。您可以使用选择图标（指向框的箭头）选择页面上的单个项目，然后查看附加了哪些样式。如果您尝试更改填充，请查看页面上的哪个元素具有填充，然后更改该类。

【讨论】：

谢谢，这非常有帮助。我很感激！
很高兴我能帮上忙！在右侧，有 Computed 选项卡，它可以直观地显示盒子模型。在那里您可以按颜色查看内边距、边距、边框、定位和大小。

【解决方案2】：

为您要编辑的 ID 添加一个 ID。 Id 否决类，使站点然后使用 id 的样式而不是类。或者从 .navbar 开始编辑，然后添加类... 例如：.navbar{...} 或 .navbar .navbar-header .navbar-brand{...}

【讨论】：

【解决方案3】：

如果您希望子菜单（症状、服务、联系方式）中心对齐，您可以在 UL 上使用 Bootstrap 的文本中心帮助器类，如下所示：

<ul class="nav navbar-nav text-center">

【讨论】：