Question

我正在尝试为Bootstrap右侧导航栏中的图像添加自定义填充。我想将左组的左/右填充保持在15px（或导航栏默认情况下），而右组的填充保持在4px。

    <style>
       li.custom { 
       padding-top: 14px;
       padding-left: 2px;
       padding-right: 2px;
       background-color: red;
      }
    </style> 

    <nav class="navbar">
    <!-- Navbar links left side  -->
    <ul class="nav navbar-nav">
        <li>Link1</li>
        <li>Link2</li>
    </ul>


    <ul class="nav navbar-nav navbar-right"> 
        <li class="custom"><a href="#"><img style="height: 15px;"src="image1.jpg"></a></li>
        <li class="custom"><a href="#"><img style="height: 15px;"src="image2.jpg"></a></li>
    </ul>
    </nav>

如果我在导航级别覆盖，它将更改应用于所有项目（在左侧和右侧）。我也尝试将自定义类分配给右侧的项目，但是没有用。它保留了默认的填充。

我希望右侧有4px的填充，但是填充仍是默认设置。

Answer 1

如果您确定要用自定义类覆盖其他样式定义，只需将!important放在其上，如下所示：

<style type="text/css">
       li.custom { 
       padding-top: 14px !important;
       padding-left: 2px;
       padding-right: 2px;
       background-color: red;
      }
</style>

检查JS小提琴here

如果您将css与Angular这样的js框架一起使用，请尝试将其添加到模块的样式模板文件中，或考虑在javascript中修改样式。

Answer 2

如果您只想在右侧申请。利用navbar-right作为选择器的一部分。像这样：

<style>
       .navbar-right > li { 
       padding-top: 14px;
       padding-left: 2px;
       padding-right: 2px;
       background-color: red;
      }
</style>

您无需创建自定义类。

如何在<li>标记中添加CSS

2 个答案: