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. MapReduce 中的两表 join 方案解析

    1. 概述 在传统数据库(如:MYSQL)中,JOIN操作是非常常见且非常耗时的.而在HADOOP中进行JOIN操作,同样常见且耗时,由于Hadoop的独特设计思想,当进行JOIN操作时,有一些特殊的 ...

  2. cursor-spacing 软键盘和input的距离

    指定光标与键盘的距离,单位 px .取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离. 例: 软键盘和input的距离300px

  3. 京东供应链模式TC转运流程

    TC转运分上门提货和自己送货到网点 上门提货是TC委托第三方货运到商家提货,他们没有装货义务,需要商家自己装货等问题 上门提货简要流程: 采购单创建 商家打单打包出库(自己公司内部建单发货) TC预约 ...

  4. 在Tomcat中部署Java Web应用程序几种方式

    在Tomcat中部署Java Web应用程序有两种方式:静态部署和动态部署.在下文中$CATALINA_HOME指的是Tomcat根目录. 一.静态部署      静态部署指的是我们在服务器启动之前部 ...

  5. xgboost调参过程

    from http://blog.csdn.net/han_xiaoyang/article/details/52665396

  6. 对 Promises/A+ 规范的研究 ------引用

    作为 Modern JavaScript 基础设施的一部分,Promises 对前端开发者而言异常重要.它是 async/await 语法的基础,是 JavaScript 中处理异步的标准形式.并且, ...

  7. python 面向对象_1

    self #self 是相当于c++的 this指针 class Ball: def setName(self,name): self.name = name def kick(self): prin ...

  8. js控制页面每次滚动一屏，和楼梯效果

    我最近在做我们公司官网的改版,产品中心就是每次滚一屏的,我觉得加上楼梯更方便用户浏览,就随便写了个demo, 先来看看结构,都很简单的 <!--楼梯--> <ul class=&qu ...

  9. sar性能监控

    1.安装sar: yum -y install sysstat 第一次使用sar命令会提示如下错误:“无法打开 /var/log/sa/sa13: 没有那个文件或目录”. 这里的值13是当天的日期,如 ...

  10. css中如何使用border属性与display属性

    border属性介绍 border属性设置元素边框. 边框3个要素如:粗细.线型.颜色. 边框线型属性值说明表如: 属性指 描述 none 定义无边框. hidden 与 "none&quo ...