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

网上找了好久,看到用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. 红黑树-算法大神的博客-以及java多线程酷炫的知识

    http://www.cnblogs.com/skywang12345/p/3245399.html 解释第5条:从 ->根节点(或者任意个结点)到->所有的末端节点的路径中 ->黑 ...

  2. post请求(headers里有属性)报错:Request header field xxx is not allowed by Access-Control-Allow-Headers in preflight response

    post 请求,headers里有属性(xxx).请求时报错: XMLHttpRequest cannot load <url>. Request header field xxx is ...

  3. Yarn、MapReduce、spark、storm的关系

    YARN并不是下一代 MapReduce (MRv2),下一代 MapReduce 与第一代 MapReduce (MRv1)在编程接口.数据处理引擎(MapTask和ReduceTask)是完全一样 ...

  4. django 获取前端获取render模板渲染后的html

    function GetProxyServerByGroup(ths, action){ var _html = $.ajax({ url: "/nginx/get_proxy_server ...

  5. centos yum安装PHP5.5,5.6,7.0

    默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案:1.检查当前安装的PHP包yum list installed | grep php如果有安装的PHP包,先删除他们 yum ...

  6. R(4) read/write

    write.table() 数据导入导出最常用的方式是使用read.table()函数和write.table()处理CSV文件的导入导出,read.table()和write.table()可以处理 ...

  7. Densenet 相关

    https://github.com/flyyufelix/DenseNet-Keras

  8. oracle 无法启动图形界面,no protocol specified

    linux 终端启动图形化程序界面时报错:No protocol specified这是因为Xserver默认情况下不允许别的用户的图形程序的图形显示在当前屏幕上. 如果需要别的用户的图形显示在当前屏 ...

  9. 跟我一起学Makefile

    概述 什么是makefile?或许很多Winodws程序员都不知道这个东西,因为那些Windows IDE都为你做了这个工作,但我觉得要做一个好的和professional的程序员,makefile还 ...

  10. Selenium2+python自动化42-判断元素(expected_conditions)

    前言 经常有小伙伴问,如何判断一个元素是否存在,如何判断alert弹窗出来了,如何判断动态的元素等等一系列的判断,在selenium的expected_conditions模块收集了一系列的场景判断方 ...