引导父级无样式列表，其中每个元素都有与父级内联的嵌套内联列表

Question

如何获取具有无序内联嵌套子列表的 Bootstrap 父无序列表<ul class="list-unstyled"></ul><ul class="list-inline"></ul>

我希望最终结果看起来像这样：

父元素 1 - 子元素 1、子元素 2

父元素 2 - 子元素 1、子元素 2、子元素 3、子元素 4

父元素 3 - 子元素 1、子元素 2、子元素 3

等

现在我有：

<ul class="list-unstyled">
<li>parent element
<ul class="list-inline">
<li>child element</li>
</ul>
</li>
</ul>

它产生

父元素 1

子元素 1、子元素 2

父元素 2

子元素 1、子元素 2、子元素 3、子元素 4

父元素 3

子元素 1、子元素2、子元素 3

等

需要更改哪些内容才能使子列表与父列表元素内联？

Answer 1

已添加

.list-unstyled li{
display: flex !important;
padding-left: 10px;
}
.list-inline{display: flex !important;}

.list-unstyled li{
display: flex !important;
padding-left: 10px;
}
.list-inline{display: flex !important;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<ul class="list-unstyled">
<li>parent element 1
<ul class="list-inline">
<li>child element 1.1</li>
<li>child element 1.2</li>
</ul>
</li>
<li>parent element 2
<ul class="list-inline">
<li>child element 2.1</li>
<li>child element 2.2</li>
<li>child element 2.3</li>
<li>child element 2.4</li>
</ul>
</li>
</ul>