Боковая панель перекрывается над элементом панели

Я работаю над простым приложением чата, и я хочу боковую панель, где пользователь может выбрать комнаты. Боковая панель должна быть разборной, но правильно знать, что боковая панель фиксирована и перекрывает элемент панели, где должны отображаться чат-беседы.Боковая панель перекрывается над элементом панели

.panel-body { 
 
    height: 75vh; 
 
    width: 75%; 
 
    float: rigth; 
 
} 
 
body { 
 
    overflow-x: hidden; 
 
} 
 
/* Toggle Styles */ 
 

 
#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 
#wrapper.toggled { 
 
    padding-left: 250px; 
 
} 
 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: absolute; 
 
    float: left; 
 
    left: 250px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -250px; 
 
    overflow-y: auto; 
 
    background: #000; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 250px; 
 
} 
 
#page-content-wrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 15px; 
 
} 
 
#wrapper.toggled #page-content-wrapper { 
 
    position: absolute; 
 
    margin-right: -250px; 
 
} 
 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 250px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #999999; 
 
} 
 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background: rgba(255, 255, 255, 0.2); 
 
} 
 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 
.sidebar-nav > .sidebar-brand { 
 
    height: 65px; 
 
    font-size: 18px; 
 
    line-height: 60px; 
 
} 
 
.sidebar-nav > .sidebar-brand a { 
 
    color: #999999; 
 
} 
 
.sidebar-nav > .sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 
@media(min-width:768px) { 
 
    #wrapper { 
 
    padding-left: 250px; 
 
    } 
 
    #wrapper.toggled { 
 
    padding-left: 0; 
 
    } 
 
    #sidebar-wrapper { 
 
    width: 250px; 
 
    } 
 
    #wrapper.toggled #sidebar-wrapper { 
 
    width: 0; 
 
    } 
 
    #page-content-wrapper { 
 
    padding: 20px; 
 
    position: relative; 
 
    } 
 
    #wrapper.toggled #page-content-wrapper { 
 
    position: relative; 
 
    margin-right: 0; 
 
    } 
 
}

<html> 
 

 
<head> 
 
    <title>Chat</title> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="static/style.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <script src="static/scripts.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 

 
    <!-- Sidebar --> 
 
    <div id="sidebar-wrapper"> 
 
     <ul class="sidebar-nav"> 
 
     <li class="sidebar-brand"> 
 
      <a href="#"> 
 
         Start Bootstrap 
 
        </a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Dashboard</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Shortcuts</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Overview</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Events</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">About</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Services</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 

 

 
    </div> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <div class="panel panel-primary"> 
 
      <div class="panel-body"> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel-footer"> 
 
     <div class="input-group"> 
 
     <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." /> 
 
     <span class="input-group-btn"> 
 
           <button class="btn btn-primary btn-sm" id="btn-chat">Send</button> 
 
           </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Как я могу это исправить, так что элемент панели регулировки ширины основания на боковой панели, если это коллапс или нет?

Спасибо, что я по достоинству оценят помощь.

источник

2016-09-25 wrivera24

Это может работать для вас (ответить на этот ответ, если нет) Есть те же классы, что Bootstrap имеет, работающий от 1024px вместо начальной загрузки родной:

/* Modify max-with to change breakpoint */ 
     @media (max-width: 1024px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 
    .navbar-nav .open .dropdown-menu { 
     position: static; 
     float: none; 
     width: auto; 
     margin-top: 0; 
     background-color: transparent; 
     border: 0; 
     -webkit-box-shadow: none; 
     box-shadow: none; 
    } 
}

источник

2016-09-25 21:35:53 JoelBonetR

Как я могу включить это в моем коде? – wrivera24

просто добавьте стили CSS ** ПОСЛЕ ** Bootstrap's. Правильный порядок: bootstrap css, jquery, bootstrap js, ваши собственные стили, а затем добавить это в нижней части ваших стилей. – JoelBonetR

Боковая панель перекрывается над элементом панели

ответ

Смежные вопросы