之前都是想直接把导航栏放左边,但是会占一整行

网上找了好久,看到用bootstrap响应式布局,可以比较简单实现

经典的,可以参考:http://demo.qianduanblog.com/3150/8.html#

4个div可以搞定:

<div class="container">
<div class="row">
<div class="col-lg-1 modal-content">
左边栏<br />
左边栏<br />
左边栏<br />
左边栏<br />
左边栏<br />
</div>
<div class="col-lg-11 modal-content">
右侧内容。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。<br />
右侧内容。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。<br />
右侧内容。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。<br />
右侧内容。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。<br />
右侧内容。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。<br />
右侧内容。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。<br />
</div>
</div>
</div> 效果:
 

bootstrap左侧边栏的更多相关文章

  1. IDEA设置左侧边栏修改代码后变色

    首先声明,此功能是基于版本控制的,不管是基于git或者是svn, 都要有版本控制方可使用. 平常情况下,IDEA左边栏是没有颜色的,如下图所示 当我们修改了代码,左侧就会有颜色显示, 右侧滚动条处也有 ...

  2. 删除资源管理器中,设备和驱动器与左侧边栏中存在的WPS网盘等图标

    存在的问题:资源管理器中,设备和驱动器与左侧边栏中存在的百度网盘和WPS网盘等图标,看着比较碍眼,所以想设置为不显示,可是软件本身不提供右键不显示或删除的功能 解决方案: 删除设备和驱动器中不想要的图 ...

  3. Thunar左侧边栏不完全显示PLACES的解决

    场景 我的笔记本装上系统时用的英文,安装中文之后,发现文件管理器的默认的几个文件夹 Desktop.Music.Videos.Downloads等都变成了中文,由于是新安装的系统,就重新生成 loca ...

  4. sublime在高分辨率屏幕下,左侧边栏字体问题

    因为新的笔记本是1920*1080分辨率的屏幕,在打开sublime的时候,侧边栏的文件夹名字会变得很小,虽然很清晰,但是太小了看起来很吃力, 如下图所示 网上找了很多的方法试了好久没有成功,一天闲下 ...

  5. JDE Client开发端 左侧边栏设置

  6. wordpress后台添加左侧边栏菜单如何操作

    我们有时为了方便操作会把一些特定的链接添加到wordpress后台左侧菜单栏中,这个要如何实现呢?其实不会很难,使用两个WordPress内置函数就可以解决问题,分别是add_menu_page()和 ...

  7. Material使用01 侧边栏MdSidenavModule、工具栏MdTollbarModule

    前提准备: 构建好一个Angular2应用 熟悉CSS的flex布局风格 1 利用flex进行布局 1.1 创建三个组件 app-header app-main app-footer 1.2 在主组件 ...

  8. android121 zhihuibeijing SlidingMenu(侧边栏效果,使用开源库)

    ## Splash ## - 旋转 RotateAnimation - 缩放 ScaleAnimation - 渐变 AlphaAnimation 工程可以作为一个库被其他工程当成一个Library使 ...

  9. ToolBar+Drawable实现一个好用的侧滑栏(侧边栏)和工具栏

    先参考下ToolBar的使用和DrawableLayout的使用: 1.主界面布局,主要结构包含一个ToolBar和一个DrawableLayout,DrawableLayout里面有左侧边栏布局和主 ...

随机推荐

  1. MySQL Disk--SSD 特性

    ======================================================================= SSD 特性 .随机读能力非常好,连续读性能一般,但比普 ...

  2. Tensoflw.js - 02 - 模型与内存管理(易懂)

    Tensoflw.js - 02 - 模型与内存管理(易懂) 参考 W3Cschool 文档:https://www.w3cschool.cn/tensorflowjs/ 本文主要翻译一些英文注释,添 ...

  3. CentOS 7防火墙开放端口快速方法

    这篇文章主要为大家详细介绍了Centos7.1防火墙开放端口的快速方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   例如安装Nagios后,要开放5666端口与服务器连接,命令如下: [ro ...

  4. 03.将MPP部署到开发板上

    转载侵删 在一般的嵌入式开发中,只要将uboot,kernel,rootfs下载到开发板上,就可以进行程序开发了.但是海思又进一步的把一些常用视频编解码算法等封装到MPP平台中,进一步简化了工程师的开 ...

  5. 【转】每天一个linux命令(44):top命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/12/24/2831353.html top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进 ...

  6. 【转】每天一个linux命令(31): /etc/group文件详解

    原文网址:http://www.cnblogs.com/peida/archive/2012/12/05/2802419.html Linux /etc/group文件与/etc/passwd和/et ...

  7. linux mutt的安装和使用

    首先介绍一下mutt这个软件,它是一款基于文字界面的邮件客户端,非常小巧,但功能强大,可以用它来读写,回复保存和删除你的邮件,能在linux命令行模式下收发邮件附件. 我只讲它很小的一部分功能,因为我 ...

  8. POJ1325机器重启次数——二分图匈牙利算法模板

    题目:http://poj.org/problem?id=1325 求最小点覆盖.输出最大匹配数就行,结果略复杂地弄了. 注意由题可知 可以直接把与0有关的边删掉.不过亲测不删0而计数时不计0就会WA ...

  9. kibana 与 grafana

    Kibana 和 Grafana 是两个开源工具,能可视化和推断大量日志数据内的趋势.Kibana 是一个分析和可视化平台,它可以让你浏览.可视化存储在Elasticsearch集群上排名靠前的日志数 ...

  10. IntelliJ IDEA常用设置

    IntelliJ IDEA进入设置界面. “File”->“Settings”,进入如下界面: 界面主题设置    CTR+鼠标滚动键改变编辑区字体大小.设置鼠标在系统类上指定时间显示注释. 设 ...