如何在bootstrap中将ul设置内联且去掉原点

2025-10-21 20:50:17

1、直接写代码。我们会发现有小原点,并且是竖着的

<ul >

<li>新闻</li>

<li>hao123</li>

<li>地图</li>

<li>视频</li>

<li>贴吧</li>

<li>学术</li>

<li>登录</li>

<li>设置</li>

</ul>

如下图所示

如何在bootstrap中将ul设置内联且去掉原点

2、第二步引入bootstrap库

在head里面

<link rel="stylesheet" href="css/bootstrap.min.css" />

body里面

<script src="js/bootstrap.min.js"></script>

<script src="js/jquery.min.js"></script>

3、第三步在ul中class写入list-unstyled,代码如下:

<ul class="list-unstyled">

<li>新闻</li>

<li>hao123</li>

<li>地图</li>

<li>视频</li>

<li>贴吧</li>

<li>学术</li>

<li>登录</li>

<li>设置</li>

</ul>

效果如下图所示,没有小原点

如何在bootstrap中将ul设置内联且去掉原点

4、第4步在ul中class写入 list-inline,代码如下:

<ul class="list-unstyled list-inline">

<li>新闻</li>

<li>hao123</li>

<li>地图</li>

<li>视频</li>

<li>贴吧</li>

<li>学术</li>

<li>登录</li>

<li>设置</li>

</ul>

效果如下图所示,没有小原点,变成内联

如何在bootstrap中将ul设置内联且去掉原点

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢