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. 【leetcode】1178. Number of Valid Words for Each Puzzle

    题目如下: With respect to a given puzzle string, a word is valid if both the following conditions are sa ...

  2. 【java工具类】删除文件及目录

    FileUtil.java /** * 删除文件及目录 * @param file; */ public static boolean delFile(File file) { if (!file.e ...

  3. 2018百度之星初赛B轮 p1m2

    p1m2 Accepts: 954 Submissions: 4063 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/1310 ...

  4. 容器————map

    序列容器是管理数据的宝贵工具,但对大多数应用程序而言,序列容器不提供方便的数据访问机制.一种典型的方法是通过名称来寻找地址.如果记录保存在序列容器中,就只能通过搜索得到这些数据.相比而言,map 容器 ...

  5. Oracle使用正则表达式拆分字段里多行分布式值

    不规范的表设计往往会带来程序设计上的麻烦,也会降低SQL的性能. 例如下表显示的内容: 这样我们调取多值字段用来做匹配的话就比较麻烦,我们可以通过正则表达式REGEXP_SUBSTR先将 多值得列分成 ...

  6. es入门--curl的使用

    文档介绍: 首先要讲什么是文档,我们中大多是java程序员,java是面向对象的,那么在elasticsearch看来:对象和文档是等价的.只不过这个对象是可以被序列化成key-value形式的jso ...

  7. String2LongUtil

    public class String2LongUtil { /** * String类型转换成date类型 * strTime: 要转换的string类型的时间, * formatType: 要转换 ...

  8. js测试用

    一,大纲 二,目录二 三,目录三

  9. debian配置国内软件源

    本例在debian:buster-slim docker镜像中实验通过 1.启动docker实例 docker run -it --name debian debian:buster-slim bas ...

  10. JRE、JDK、JVM 及 JIT 之间有什么不同

    java虚拟机(JVM)     使用java编程语言的主要优势就是平台的独立性.你曾经想知道过java怎么实现平台的独立性吗?对,就是虚拟机,它抽象化了硬件设备,开发者和他们的程序的得以操作系统.虚 ...