Bootstrap：使用 DIV（或其他元素）而不是 UL > LI 进行导航答案

【问题标题】：Bootstrap: Having navigation with DIVs (or other elements) instead of UL > LIBootstrap：使用 DIV（或其他元素）而不是 UL > LI 进行导航
【发布时间】：2016-11-22 08:52:57
【问题描述】：

我想拥有自己的标记

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

我现在不能这样做，因为引导程序仅通过元素名称而不是类来定位内部的 LI

例如

.nav-justified {
  width: 100%;

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

有什么想法吗？

【问题讨论】：

你能把你的代码放在 jsfiddle 或 jsbin 中，这样我们就可以看到你在做什么？你用 Angular2 标记了你的问题，但你问的是一个 Bootstrap CSS 问题，所以显然那里有一些混乱:)
您是只使用 CSS 还是使用他们的 SASS？
不，我正在使用 LESS
@Brunis：是的，我的错误......在我之前的问题之后表格没有清除；）抱歉造成混乱......这严格来说是引导程序/“html”；）跨度>
@SebastianG.Marinescu：理论上我可以更改引导程序代码中的 nav.less ......但我真的不想这样做......但似乎我将不得不覆盖它和我的:)

标签： twitter-bootstrap

【解决方案1】：

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

因为我经常使用 SASS，所以我在考虑 extending a class/selector — 但是当你使用 LESS 时，你需要 the equivalent :extend(.class)-method。

因此，您可以在项目中添加另一个 LESS 文件，并在其中设置您的标记并扩展现有的 Bootstrap 样式：

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

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

（这个方向的东西，取决于你的需要 // 代码未经测试）

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

More about the LESS extend feature

【讨论】：

是的，我也在想同样的事情 ;) 只是没有正确表达自己 ;) 好吧，为输入欢呼！赞赏！