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. antd不可选择时间

    //不能选择今天之前的日期<DatePicker format={this.timeFormat} showTime placeholder="项目结束日期" disable ...

  2. 配置中心Apollo多环境部署

  3. VMware NAT 静态IP模式下上网

    自从开始学Linux之后,对使用NAT模式上网,很是困惑.具体原理,还待求证. 使用方法(VMware): 简介: wmware在NAT使用方面很是轻松 打开本地的网络适配器. 修改虚拟网卡VMnet ...

  4. 在windows窗口下打开文件夹

    System.Diagnostics.Process.Start("Explorer.exe", @"C:\Users\gnt-wangt\Documents\Visua ...

  5. 最全的Android开发资源整理--进阶必备

    原文链接: http://stormzhang.github.io/android/2014/06/05/android-awesome-resources/ (友情提醒:最近google的很多服务被 ...

  6. 关于同时可用git命令clone和TortoiseGit拉取代码不需要密码

    工作需要在windows7下使用git分布式版本控制系统,需要同时可以在git命令行模式或TortoiseGit拉取代码而不需要每次输入密码. 这时候需要同时安装git和TortoiseGit. gi ...

  7. 【每日一包0006】dedupe

    github地址:https://github.com/ABCDdouyae... dedupe 对数组进行去重,也可以自定义去重(比如要求数组的每一个对象的某个属性不重复) 文档地址:https:/ ...

  8. php GD库简单使用和封装

    GD库创建图像步骤 <?php //1.创建画布 $width = 300; $height= 200; $image=imagecreatetruecolor($width,$height); ...

  9. git连接远程仓库时，出现“ Repository not found"的解决办法

    2018-08-25 今天连接远程仓库时,出现: 原来是远程仓库地址名字错了. 解决方法: 1.找到.git目录 2.进入.git找到config文件 3.修改config里面的远程地址url

  10. iOS 自定义一对UI表现相反的按钮

    假如有一对按钮[重置][提交],要让他们的默认UI和点击的UI表现刚好相反 [提交]按钮,默认橙色,点击边框是橙色,字体是橙色,背景变白色 [重置]按钮,默认白色橙色,边框是橙色,点击字体是白色,背景 ...