Question

我想拥有自己的标记

<nav>
<my-list class="nav-justified">
    <item class="nav-item">Text 1</item>
    <item class="nav-item">Text 2</item>
</my-list>
</nav>

我现在不能这样做，因为bootstrap只是通过元素名称而不是通过类来定位LIs

例如

.nav-justified {
  width: 100%;

  > li {
    float: none;
    > a {
      text-align: center;
      margin-bottom: 5px;
    }
  }

任何想法？

Answer 1

在您的情况下，您必须添加一些CSS或更改现有的CSS。

由于我正在使用SASS，我在考虑extending a class/selector - 但是当你使用LESS时，你需要the equivalent :extend(.class)-method。

所以你可以在你的项目中添加另一个LESS文件，并在那里设置你的标记并扩展现有的Bootstrap-Styles：

my-list:extend(.nav-justified) {...}

.nav-item:extend(.nav-justified > li) {...}

（根据您的需要，这个方向的东西//代码未经测试）

通过扩展现有选择器并在单独的文件中工作，您的项目应该保持干净，并且您可以在使用Bootstrap的其他项目中重复使用您的工作。