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

网上找了好久,看到用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. 【HAOI2008】玩具命名

    水题大失败 原题: 某人有一套玩具,并想法给玩具命名.首先他选择WING四个字母中的任意一个字母作为玩具的基本名字.然后他会根据自己的喜好,将名字中任意一个字母用“WING”中任意两个字母代替,使得自 ...

  2. sdut2408 pick apples (贪心+背包)山东省第三届ACM省赛

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/svitter/article/details/24642587 本文出自:http://blog.c ...

  3. WebService的web客户端同步、异步、多线程向服务端传入参数的数据交互方式

    接着上一章的内容,在上一章中我们知道了如何.net平台下去建立一个WebService,以及同步调用.异步调用.开线程异步调用三种客户端从服务端获取数据的方式,在本章了所要讲的,是如何将客户端的数据, ...

  4. k最邻近算法——使用kNN进行手写识别

    上篇文章中提到了使用pillow对手写文字进行预处理,本文介绍如何使用kNN算法对文字进行识别. 基本概念 k最邻近算法(k-Nearest Neighbor, KNN),是机器学习分类算法中最简单的 ...

  5. Mac 上 java 究竟在哪里,本文彻底让你搞清楚!

    Mac下当你在[终端]输入java -version时,是执行的哪里的java呢,which java命令可以看到,就是[/usr/bin/java] [/usr/bin/java]只是个替身,实际指 ...

  6. 【appium】根据accessibility_id定位元素

    如何获得AccessibilityId 可以通过UIAutomatorViewer或者Appium Inspector获得.Accessibility ID在Android上面就等同于contentD ...

  7. 使用纯生js操作cookie

    前段时间做项目的时候要使用js操作cookie,jquery也有相应的插件,不过还是觉得纯生的js比较好,毕竟不依赖jq. //获得coolie 的值 function cookie(name) { ...

  8. bzoj 4842: [Neerc2016]Delight for a Cat

    Description ls是一个特别堕落的小朋友,对于n个连续的小时,他将要么睡觉要么打隔膜,一个小时内他不能既睡觉也打隔膜 ,因此一个小时内他只能选择睡觉或者打隔膜,当然他也必须选择睡觉或打隔膜, ...

  9. ThinkJava-复用类

    7 .2 继承语法 例子: package com.cy.reusing; import static com.java.util.Print.*; class Cleanser { private ...

  10. 使用shell/bat脚本调试java程序示例

    一.linux下shell启动java #!/bin/sh JAVA_HOME=/usr/lib/jvm/java-1.6.0-openjdk-1.6.0.0.x86_64/jre # JVM_OPT ...