引导程序列出内联问题/ fiddle 和尝试的代码

Question

编码新手在列表内联和不显示函数方面有一个 boostrap 问题。

我在 sublime text 和 js 中试过这个fiddle，但都没有提供我想要的最终结果。

注意：2 个 cdnjs 已经添加到 fiddle

访问：http://jsfiddle.net/thomasmccabe44/fqce10na/

<ul class="list-unstyled">
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>  

<ul style="display: inline;">
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>  

<hr>

尝试 2

项目一

项目二

项目三

尝试 3

项目一

项目二

项目三

我预计：项目一项目二项目三

实际结果：项目一项目二第三项

或

项目一项目二第三项

全部返回带要点。

Answer 1

在 Bootstrap 4 中，您的 ul 应该有 list-inline class，而您的 li 应该有 list-inline-item class :

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <ul class="list-inline">
    <li class="list-inline-item">Item One</li>
    <li class="list-inline-item">Item Two</li>
    <li class="list-inline-item">Item Three</li>
  </ul>  
</div>

引导程序列出内联问题/ fiddle 和尝试的代码

boostrap lists inline issues w/ fiddle and attempted code

twitter-bootstrap

bootstrap-4

jsfiddle