1. 程式人生 > >SB Admin 2 修改側邊導航欄寬度

SB Admin 2 修改側邊導航欄寬度

boot css 分享 側邊欄 vpd efault 寬度 inpu boa

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差不多

SB Admin 2 修改側邊導航欄寬度