Boostrap3 li元素橫向：

<ul class="nav navbar-nav list-inline">

  <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">FB</a></li>

  <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">G+</a></li>

  <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">T</li>

</ul>

Boostrap4 以上方法不行，得以下方法：

<ul class="list-inline">

	<li class="list-inline-item"><img src="http://static.open-open.com/news/uploadImg/20160727/20160727083501_753.jpg" width="100px" </li>

	<li class="list-inline-item"><img src="http://static.open-open.com/news/uploadImg/20160727/20160727083501_753.jpg" width="100px" </li>

	<li class="list-inline-item"><img src="http://static.open-open.com/news/uploadImg/20160727/20160727083501_753.jpg" width="100px" </li>

	<li class="list-inline-item"><img src="http://static.open-open.com/news/uploadImg/20160727/20160727083501_753.jpg" width="100px" </li>

</ul>

　　

Boostrap4 li列表橫向的更多相关文章

  1. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  2. jquery中对于ul>li列表分页。学习记录

    这个是很简单的一种分页,只能对列表进行分页.为了开发有可能需要用到记录下来 Html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  3. li列表循环滚动的简单方法,无需插件,简单方法搞定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Vue 循环为选中的li列表添加效果

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vu ...

  5. 去掉li列表前面的空格

    如果用li做列表的话,li前面的空格其实是li的默认样式.因为li位于ul里面,所以,有空格代表了ul肯定有padding值. ul { margin: 0px; padding: 0px; }

  6. css li 列表

    ul,li{list-style-type:none;padding:0;margin:0}

  7. ul li列表元素浮动导致border没有底边解决办法

    如图,当ul li,li元素浮动,并且ul元素也overflow:hidden清除浮动的时候,给li元素加了border,但是不显示底边,这时候要看是不是没有给li元素加高,因为加了border之后默 ...

  8. 基于vue-cli li列表的显示隐藏

    效果:点击“公告标题”,显示公告内容,点击同一个“公告标题”多次,显示与隐藏切换 方法一: html部分代码: <ul class="clist"> <li v- ...

  9. jquery输入框动态查询l<li></li>列表

    1.html代码如下: 2.js代码如下: $('#search').bind('input propertychange', function () { searchKpoint(); }); fu ...

随机推荐

  1. 关于web网页截图的问题(html2canvas插件)

    import html2canvas from 'html2canvas' import jpg from '@/assets/1.jpg';     htmlToImage=(element, ca ...

  2. 轻松学习JVM——垃圾回收器

    原文链接:https://www.cnblogs.com/leefreeman/p/7402695.html 上一篇我们介绍了常见的垃圾回收算法,不同的算法各有各的优缺点,在JVM中并不是单纯的使用某 ...

  3. scala spark（2.10）读取kafka(2.11_1.0.0)示例

    1.pom加载jar包 <dependency> <groupId>org.apache.spark</groupId> <artifactId>spa ...

  4. 正则获取a标签和a标签中的href地址

    /(<\/?a.*?>)/ a标签 /<a\b.*?</a>/ 表式以"<a "(有空格) 开始 以"</a>" ...

  5. 6402. 【NOIP2019模拟11.01】Cover（启发式合并）

    题目描述 Description 小 A 现在想用

  6. Linux系统下lz4解压缩命令小结

    lz4是一个让"人见人爱.花见花开"的压缩算法,能够在多核上很好的扩展.lz4在压缩率上略微逊色, 但是在解压速度上有着惊人的优势 (大概是gzip的3倍(多次测试对比)).因为压 ...

  7. AJAX - 服务器 响应

    AJAX - 服务器 响应 服务器响应 如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性.大理石构件来图加工 属性 描 ...

  8. 通过PPA存储库在UBUNTU或LINUX MINT中安装ORACLE JAVA 8 [JDK8]

    http://www.webupd8.org/2012/09/install-oracle-java-8-in-ubuntu-via-ppa.html sudo add-apt-repository ...

  9. 1-window搭建git

    windows7搭建Git私服 作为版本控制工具大多公司会选用Git,但svn也具有一定的优势,在对开源项目管理方面,Git具有一定的优势,我们可以将自己的项目放到GitHub上面,供大家交流学习,但 ...

  10. x-pack邮件报警功能

    1):修改elasticsearch.yml xpack.notification.email.account: work:   profile: standard   email_defaults: ...