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. keep-alive 组件级缓存

    前言 在Vue构建的单页面应用(SPA)中,路由模块一般使用vue-router.vue-router不保存被切换组件的状态, 它进行push或者replace时,旧组件会被销毁,而新组件会被新建,走 ...

  2. 风控MIS那些事

    信贷风险管理应基于数据进行决策,MIS则是通过对数据的加工与展示,给决策者提供参考. 管理信息系统(ManagementInformation System,MIS)是进行信息的 收集.传输.加工.储 ...

  3. 便捷删除QQ空间说说

    用Chrome打开QQ空间说说(心情),按F12,在Console里面粘贴以下代码,按回车 var delay = 1000; function del() { document.querySelec ...

  4. rmq——同步、异步、单向、rocketMQ console、消费模式

    官网上下载:rocketmq-all-4.5.0-bin-release 配置环境变量:

  5. 【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 ...

  6. 【shell】awk的next用法

    awk的next相当于循环中continue的作用,next后面的语句将不再执行. 例如,下面的例子中,包含数字3的那行的print语句没有被执行. [root]$ seq | awk '{print ...

  7. 使用webuploader组件实现大文件分片上传，断点续传

    本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...

  8. BZOJ 3162: 独钓寒江雪 树的同构 + 组合 + 计数

    Description Input   Output 求一棵树编号序列不同的方案数: 令 $f[u],g[u]$ 分别表示 $u$ 选/不选 的方案数. 则 $f[u]=\prod_{v\in son ...

  9. Codeforces 962D Merge Equals ( 模拟 )

    题意 : 给出一个序列,然后每次将重复出现的元素进行求和合并(若有多个,则优先取最小的进行合并),若某重复元素有很多,那么取最左边的那两个进行合并且合并后元素位于原来右边元素的位置,例如 3 2 6 ...

  10. Javascript高级程序设计第三版-笔记

    1.JS数值最大值最小值: >Number.MIN_VALUE <5e-324 >Number.MAX_VALUE <1.7976931348623157e+308 判断数值是 ...