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----webserver项目2

    # 编码问题 - 为什么需要编码问题 - 本质上计算机只能识别01代码 - 如何用一长串01代码表示复杂的信息 - encode:编码  decode:解码 - 编码简史 - 二进制 - bit: 一 ...

  2. Java——静态类型 实际类型

    public class test { static class father { void run() { System.out.println("father run"); } ...

  3. 解决IDEA Initialization error 'https://start.spring.io'

    IDEA Initialization error  'https://start.spring.io'     弹出一个error窗口    就是不能连接https://start.spring.i ...

  4. React Native中集成友盟社会化分享-----童叟无欺

    1.下载所需的jar,下载地址https://developer.umeng.com/sdk/reactnative?spm=a211g2.211692.0.0.28967d238GW6mC 2.将以 ...

  5. Overview over available Turtle and Screen methods

    24.5.2.1. Turtle methods Turtle motion Move and draw forward() | fd() backward() | bk() | back() rig ...

  6. Spring Boot教程（二十二）使用Swagger2构建强大的RESTful API文档（1）

    由于Spring Boot能够快速开发.便捷部署等特性,相信有很大一部分Spring Boot的用户会用来构建RESTful API.而我们构建RESTful API的目的通常都是由于多终端的原因,这 ...

  7. NBU5240备份系统还原数据库--Linux版

    利用NBU灾备系统数据库RMAN备份文件还原EHR数据库,将数据库还原到2017-7-10 10:00:00 linux centsos 6.6 原数据库版本 11.2.0.1  IP/hostnam ...

  8. 使用kibana构建各种图

    1.3.1:建立索引 以下命令来为莎士比亚数据集设置 mapping(映射): curl -XPUT http://hadoop01:9200/shakespeare -d '{ "mapp ...

  9. 一、Spring MVC起步——IntelliJ IDEA 搭建Spring MVC环境（手把手搭建）

    本机环境: JDK 1.7 IntelliJ IDEA 2017.2 1.新建项目 Create New Project ​ 选择Spring MVC ​ 填写项目名和项目存放位置 ​ 然后点击Fin ...

  10. hive里面union all的用法记录

    UNION用于联合多个select语句的结果集,合并为一个独立的结果集,结果集去重. UNION ALL也是用于联合多个select语句的结果集.但是不能消除重复行.现在hive只支持UNION AL ...