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. python实例31[列出目录下所有的文件到txt]

    代码: (使用os.listdir) import os def ListFilesToTxt(dir,file,wildcard,recursion):     exts = wildcard.sp ...

  2. EM算法理解的九层境界

    EM算法理解的九层境界 EM 就是 E + M EM 是一种局部下限构造 K-Means是一种Hard EM算法 从EM 到 广义EM 广义EM的一个特例是VBEM 广义EM的另一个特例是WS算法 广 ...

  3. 阅读之SQL优化

    一.性能不理想的系统中除了一部分是因为应用程序的负载确实超过了服务器的实际处理能力外,更多的是因为系统存在大量的SQL语句需要优化. 为了获得稳定的执行性能,SQL语句越简单越好.对复杂的SQL语句, ...

  4. CodeForces-437C(贪心)

    链接: https://vjudge.net/problem/CodeForces-437C 题意: On Children's Day, the child got a toy from Delay ...

  5. 【NOIP2016提高组day1】†换教室

    题目 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的 课程. 在可以选择的课程中,有 2n 节课程安排在 n 个时间段上. 在第 i ( 1 ≤ i ≤ n )个 时间段上,两 ...

  6. SQL结果统计 GROUP BY

    在结果几种,使用GROUP BY进行相同项求和的时候SELECT的字段要与GROUP BY后面的一一对应. select M.TIME,M.PRODUCTMODEL,M.PROCESS_PRODUCT ...

  7. html article标签 语法

    html article标签 语法 article标签有什么作用?直线电机生产厂家 作用:html中article标签的作用是规定独立的自包含内容,其中外部内容是来自一个外部的新闻提供者的一篇新文章, ...

  8. asp.net ajax传递Json给aspx.cs后台 webmethod方法传递json

    1.提取一个向后台写入数据的方法 ///向后台cs页面请求数据的方法 function myPost(url,data,func) { $.ajax({ type: "post", ...

  9. shell java应用启动脚本（app.sh）

    #!/bin/sh # java服务中需要的jar文件或classpath路径,如业务程序.第三方jar文件log4j等 ShellAbsPath=$(cd "$(dirname " ...

  10. 3D Computer Grapihcs Using OpenGL - 19 Vertex Array Object(顶点数组对象)

    大部分OpenGL教程都会在一开始就讲解VAO,但是该教程的作者认为这是很不合理的,因为要理解它的作用需要建立在我们此前学过的知识基础上.因此直到教程已经进行了一大半,作者才引入VAO这个概念.在我看 ...