SB Admin 2 修改侧边导航栏宽度

SB Admin 2, 一个免费的 bootstrap 主题,具有很广泛使用规模,实际使用中发现,导航的侧边栏太宽了,有过右侧有大型datatable,会变得很难看。

<div class="navbar-default sidebar" role="navigation">
    <div class="sidebar-nav navbar-collapse">
        <ul class="nav" id="side-menu">
            <li class="sidebar-search">
                <div class="input-group custom-search-form">
                    <input type="text" class="form-control" placeholder="Search...">
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
                </div>
                <!-- /input-group -->
            </li>
            <li>
                <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>

如何修改呢?可以修改dist/css/sb-admin-2.css文件

17-24行

@media (min-width: 768px) {
  #page-wrapper {
    position: inherit;
    margin: 0 0 0 250px;
    padding: 0 30px;
    border-left: 1px solid #e7e7e7;
  }

102-108行

@media (min-width: 768px) {
  .sidebar {
    z-index: 1;
    position: absolute;
    width: 250px;

改那个250px就可以了。默认是250px,改成150px差不多

原文地址:http://blog.51cto.com/ipcpu/2141362

时间: 2024-10-05 23:07:53

SB Admin 2 修改侧边导航栏宽度的相关文章

【源码分享】jquery+css实现侧边导航栏

jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1效果图 当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2css代码 这里是css代码,详情请看注释 1 <style>

【AmazeUI】手机版页面的顶部导航条Header与侧边导航栏offCanvas

顶部导航条如果你细心留意下现在的页面,实在是太常见了.这个组件在手机端的页面中,同样可以借助AmazeUI这个前端框架实现.与此同时,可以在导航栏的最右方加一个触发侧边导航栏offCanvas.不要再使用BootStrap那种,一旦点击就大幅度下拉的导航了,反正我个人觉得很蛋疼的.一个导航活活地占据了页面大量位置.这个侧边导航栏offCanvas曾经是php方面的WorkPress的优秀设计来的. 使用AmazeUI做出来的效果如下: 首先是顶部导航栏的代码: <!--这里的顶部导航栏与Boot

Android 修改底部导航栏navigationbar的颜色

Android 修改底部导航栏navigationbar的颜色 getWindow().setNavigationBarColor(Color.BLUE); //写法一 getWindow().setNavigationBarColor(getResources().getColor(R.color.black_12));//写法二

基于jQuery右侧弹出侧边导航栏代码

基于jQuery右侧弹出侧边导航栏代码.这是一款点击按钮弹出侧边导航栏样式特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="box-bj"><img src="images/wd011.jpg" /></div> <div id="mintbar"><a id="closebtn" href="#"&g

iOS开发-仿大众点评iPad侧边导航栏

昨天其实已经写了一篇侧边栏的文章,不过感觉还不是很清晰,这篇文章算是补充吧,iPad上看了大众点评的侧边栏,基本上百分之九十类似,具体效果可参考下图: 对比昨天主要做了两个修改,一个是图片和文字的显示位置,另外一个就是关于底部的定位和设置的位置在横竖屏时显示的问题,侧边栏的区域是是自己控制的,需要注意一下横竖屏的时候设置一下autoresizingMask,底部图标定位的时候也是一样设置. 导航栏上每个按钮提取出了一个父类GPDockItem,头文件中的代码: // // GPDockItem.

jQuery实现侧边导航栏效果

效果图: 以下是完整代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="JS代码,侧边菜单,拉出菜单,高级菜单,导航菜单,jquery菜单" /><met

使用bootstrap3.0搭建一个具有自定义风格的侧边导航栏

由于工作变动,新的项目组,可能会涉及到更多的类似于后台管理系统这一类的项目,而且开发可能更加偏向于传统型的开发,希望今后能够在新的项目中能够用得上vuejs吧! 接手项目的时候,就是一个后台管理系统,而且采用了Bootstrap进行搭建,页面大致模型也基本搭建成功了.然后看到页面上有一个侧边栏,之前是他们从别的地方找出来的一个侧边栏,给人的感觉总是差那么点意思.所以重构了一下.具体的效果,请移步bootstrap-sidebar . 其实主要就解决了两个问题: 1.与内容等高,最小高度为一屏的高

关于scroll实现侧边导航栏

需求为一个简单的scroll效果,侧边选项卡跟随屏幕向下拖动变颜色的.点击侧边选项卡,跳转到相应模块. 索性上网找了一下类似的效果.附带源码地址  https://blog.csdn.net/dream_fa/article/details/72842193 原有样式与js确实有点欠妥,所以进行了简单修改. 需要注意的是js代码中.取得网页被卷去的高的时候,并未考虑兼容性的问题.以至于可能影响整体效果. eg:// var scroH=document.body.scrollTop; var s

实现侧边导航栏的悬浮设置

首先看效果图: 最开始鼠标没有滚动的时候: 当鼠标滚动下拉到一定高度的时候: 侧边的悬浮框会一直悬浮在最左边,实现导航的悬浮. 通过js代码实现: js代码: var n_t1 = $('body').height() * 0.12; if(scrTop < n_t1){ $('.content2_left').css("position","absolute") $('.content2_left').css("left","0