Angular 引导<；李>；元素不创建新行

我正在创建一个侧边栏菜单。代码如下所示：

<div class="row m-t-1 p-l-1">
  <h5 class="font-bold">{{brandsTitle}}</h5>
  <ul class="nav nav-pills nav-stacked f-1pt2" *ngFor="let menu of brandsMenu">
    <li class="m-b-pt5">{{menu.type}}</li>
  </ul>
</div>

<div class="row m-t-1 p-l-1">
  <h5 class="font-bold">{{washersTitle}}</h5>
  <ul class="nav nav-pills nav-stacked f-1pt2 line-ht-1pt5" *ngFor="let menu 
    of washersMenu"> 
    <li class="m-b-pt5">{{menu.type}}</li>
  </ul>
</div>

{{brandsTitle}}

{{menu.type}

{{washersTitle}}

{{menu.type}

第一段代码创建品牌菜单，但项目创建在同一行上，而不是出现在新行上，如图所示。有些项目之间没有空格

Appliance Brands AmanaWhirlpool FrigidaireGEMaytag Samsung 家电品牌 Amanawhirpool 寒带 三星 我期望：

Appliance Brands Amana Whirlpool Frigidaire GE Maytag Samsung 家电品牌 阿曼娜 漩涡 寒岛 通用电气 梅塔格 三星 第二段代码按预期生成洗衣机菜单

Washers Top Load Washers Front Load Washers Unitized Washers & Dryers 垫圈 顶装垫圈 前负荷清洗器 组合式洗衣机和烘干机

---

如果您希望每个菜单都有自己的

li

，则

*ngFor

需要出现在该元素上，而不是

ul

<div class="row m-t-1 p-l-1">
  <h5 class="font-bold">{{ brandsTitle }}</h5>
  <ul class="nav nav-pills nav-stacked f-1pt2">
    <li class="m-b-pt5" *ngFor="let menu of brandsMenu">{{ menu.type }}</li>
  </ul>
</div>

<div class="row m-t-1 p-l-1">
  <h5 class="font-bold">{{ washersTitle }}</h5>
  <ul class="nav nav-pills nav-stacked f-1pt2 line-ht-1pt5"> 
    <li class="m-b-pt5" *ngFor="let menu of washersMenu">{{ menu.type }}</li>
  </ul>
</div>

{{brandsTitle}}

{{menu.type}

{{washersTitle}}

{{menu.type}

有关更多信息，请参阅

此外，如果您希望在引导中使用垂直导航，则需要：

<ul class="nav flex-column">
  <li class="nav-item" *ngFor="let menu of washersMenu">
    <a class="nav-link">{{ menu.type }}</a>
  </li>
</ul>

如果希望每个菜单都有自己的
li
，则
*ngFor
需要出现在该元素上，而不是
ul

<div class="row m-t-1 p-l-1">
  <h5 class="font-bold">{{ brandsTitle }}</h5>
  <ul class="nav nav-pills nav-stacked f-1pt2">
    <li class="m-b-pt5" *ngFor="let menu of brandsMenu">{{ menu.type }}</li>
  </ul>
</div>

<div class="row m-t-1 p-l-1">
  <h5 class="font-bold">{{ washersTitle }}</h5>
  <ul class="nav nav-pills nav-stacked f-1pt2 line-ht-1pt5"> 
    <li class="m-b-pt5" *ngFor="let menu of washersMenu">{{ menu.type }}</li>
  </ul>
</div>


{{brandsTitle}}

{{menu.type}

{{washersTitle}}

{{menu.type}


有关更多信息，请参阅

此外，如果您希望在引导中使用垂直导航，则需要：

<ul class="nav flex-column">
  <li class="nav-item" *ngFor="let menu of washersMenu">
    <a class="nav-link">{{ menu.type }}</a>
  </li>
</ul>



我同意Brandon的观点，除非你想创建一组ul元素，将ngFor放在li元素上

然而这不是你的问题

因为即使这样，多个ul元件也应该断线。问题是你的ul class=“nav药片”。引导将li项放置为内联。所以要么删除这个类，要么用dipslay:block覆盖它，这样每个ul（或li）行都会断开。
我同意Brandon的观点，除非你想创建一组ul元素，将ngFor放在li元素上

然而这不是你的问题

因为即使这样，多个ul元件也应该断线。问题是你的ul class=“nav药片”。引导将li项放置为内联。因此，要么删除该类，要么用dipslay:block覆盖该类，使每个ul（或li）行中断。
您的
brandsMenu
和
washersMenu
数据是什么样子的？另外，您的代码输出是什么样子的？如果HTML的结构是正确的，并且每个值都在它自己的
元素中，那么这就是CSS问题。{“\u id”：{“$oid”：“5ad7378cf36d28165c059b8e”}，“id”：“Appliances”，“kind”：“Appliances Brands”，“type”：“Amana”}{“\u id”：{“$oid 5ad738a9f36d28165c059d50”}，“Appliances”，“种类”：“垫圈”，“类型”：“顶部装载垫圈”}并且您有一个这些对象的数组？您的
brandsMenu
和
washersMenu
数据是什么样子的？还有，您的代码输出是什么样子的？如果HTML的结构是正确的，并且每个值都在它自己的
元素中，那么这就是CSS问题。{“\u id”：{“$oid”：“5ad7378cf36d28165c059b8e”}，“id”：“Appliances”，“kind”：“Appliances Brands”，“type”：“Amana”}{“\u id”：{“$oid 5ad738a9f36d28165c059d50”}，“Appliances”，“种类”：“垫圈”，“类型”：“顶部装载垫圈”}您有这些对象的数组吗？我移除了导航丸并使用display:block。仍然不起作用。删除“导航”类。如果您需要该元素的一些样式，我建议覆盖它。应该会让你更好地了解你可以做的一些调整。我去掉了导航药片，使用了display:block。仍然不起作用。删除“导航”类。如果您需要该元素的一些样式，我建议覆盖它。应该会让你更好地了解你可以做的一些调整。你是否尝试过Brandon关于
flex column
的建议？这应该行得通。你有没有试过Brandon关于弹性柱的建议？这应该行得通。