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. React 错误处理(componentDidCatch)

    前言 看react 文档突然发现有这个 错误处理函数,好像是17年9月出的,这个真的绝了可以帮助我们捕捉错误咯 React 16 将提供一个内置函数 componentDidCatch,如果 rend ...

  2. thinkphp5杂谈--项目架构和模板搭建(view视角)

    nginx网站配置 项目架构 项目文件夹 视图模板 一种出幺蛾子的访问办法 访问相关特色模块并渲染视图

  3. 算法复习_线性时间求解Majority Vote Algorithm问题

    题目来源于Leecode上的Majority Element问题 Majority Element:在一个序列中出现了至少n/2的下界次 使用排序算法取中位数则需要Nlogn http://www.c ...

  4. json 转xml

    var jStr = JsonConvert.SerializeObject(new { root = new { li = list } }); var xml = JsonConvert.Dese ...

  5. httpClient和RestTemplate的使用

    1.httpClient的使用 <dependency> <groupId>org.apache.httpcomponents</groupId> <arti ...

  6. 选择vim编辑器的7个理由

    当我刚刚开始用 vi 文本编辑器的时候,我讨厌它!我认为这是有史以来设计上最痛苦和反人类的编辑器.但我还是决定我必须学会它,因为如果你使用的是 Unix,vi 无处不在并且是唯一一个保证你可以使用的编 ...

  7. Maven Waring : GroupId is duplicate of parent groupId 和 Version is duplicate of parent version

    问题描述: 新项目在创建的时候,因为用到了分模块的,所以导致子模块的pom文件,报了 如下警告: 解决办法: 直接 Window --> Preferences -->  Maven -- ...

  8. SQL的积累

    SQL的积累学习(不常用的经常会忘记,所以以后用到的就会记在下面): --新增字段alter table t_Student add Test varchar(200)--删除字段alter tabl ...

  9. Java文件中代码

    public class MyTextView extends TextView { //在用代码创建的时候调用 public MyTextView(Context context) { this(c ...

  10. C语言字符数组详解

    字符串的存储方式有字符数组和字符指针,我们先来看看字符数组. 因为字符串是由多个字符组成的序列,所以要想存储一个字符串,可以先把它拆成一个个字符,然后分别对这些字符进行存储,即通过字符数组存储.字符数 ...