Boostrap3 li元素橫向：

  1. <ul class="nav navbar-nav list-inline">
  2.   <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">FB</a></li>
  3.   <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">G+</a></li>
  4.   <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">T</li>
  5. </ul>

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

  1. <ul class="list-inline">
  2. 	<li class="list-inline-item"><img src="http://static.open-open.com/news/uploadImg/20160727/20160727083501_753.jpg" width="100px" </li>
  3. 	<li class="list-inline-item"><img src="http://static.open-open.com/news/uploadImg/20160727/20160727083501_753.jpg" width="100px" </li>
  4. 	<li class="list-inline-item"><img src="http://static.open-open.com/news/uploadImg/20160727/20160727083501_753.jpg" width="100px" </li>
  5. 	<li class="list-inline-item"><img src="http://static.open-open.com/news/uploadImg/20160727/20160727083501_753.jpg" width="100px" </li>
  6. </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. vue interceptors(拦截器)

    拦截器 顾名思义: 就是半路个您劫持, 拦截器 其实在项目和自己写demo中,总会遇到请求方面需要在请求头里面做判断或者添加一些东西, 这时候 vue 中应用中axios的 interceptors  ...

  2. centos6.5搭建zabbix3.4

    centos6.5搭建zabbix3.4 参考资料:https://blog.csdn.net/qq_36331560/article/details/80517282 客户端: https://bl ...

  3. 【NOIP2016提高A组模拟9.17】序列

    题目 分析 首先用\(a_i\)表示达到目标的步数\(B_i-A_i(mod 4)\) 根据粉刷栅栏,先不管mod 4的情况,答案就是\(\sum\max(a_i-a_{i+1},0)\) 那我们刚才 ...

  4. vue2.0关于添加属性后视图不能更新的问题

    属性赋值和this.$set 和vue.$set方法我不行 可以用 this.$delete来进行删除后在设置都可以了

  5. fiddler界面工具栏介绍（二）

    工具栏介绍 1.Winconfig,Windows 使用了一种称为“AppContainer”的隔离技术,使得一些进程的流量无法捕获,打开WinConfig后可设置解除隔离. 2.气泡按钮,给sess ...

  6. html b标签 语法

    html b标签 语法 标签b是什么意思? b的意思是bold,b标签主要用于html中规定粗体文本,该标签内的字符将被设为粗体.B标签所传达的意思只是加粗,没有任何其它的作用. 作用:规定粗体文本. ...

  7. iview2.0 日期选择器DatePicker 所选时间格式不对

    网上有很多解决方式,大部分都是加个@on-change事件.比如下图: 但是如果是编辑的时候,打开编辑页面,通过数据库返回时间显示出来是对的,但是不触发change事件,直接点保存的话,保存后还是少8 ...

  8. SpringBoot项目中，cookie的设置与销毁

    cookie的设置与销毁 1.设置cookie /** * 设置一个cookie * @param response HttpServletResponse * @param name cookie的 ...

  9. luogu P1077 摆花 x

    P1077 摆花 题目描述 小明的花店新开张,为了吸引顾客,他想在花店的门口摆上一排花,共m盆.通过调查顾客的喜好,小明列出了顾客最喜欢的n种花,从1到n标号.为了在门口展出更多种花,规定第i种花不能 ...

  10. Android中StatFs获取系统/sdcard存储(剩余空间)大小

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...