Нажимайте содержимое в сторону от боковой панели при изменении размера экрана

Я хочу, когда размер экрана достигает 1512 x 473 для содержимого внутри content.php, чтобы не накладываться на левую боковую панель. Поскольку это делает ссылки боковой панели нечитаемыми. Будет очень ценю помощь, ребята :)Нажимайте содержимое в сторону от боковой панели при изменении размера экрана

content.php

<div class="container-fluid"> 

       <!-- Page Heading --> 
       <div class="row"> 
        <div class="col-lg-12"> 
         <h1 class="page-header"> 
          Dashboard 

         </h1> 

        </div> 
       </div> 
       <!-- /.row --> 


         <div class="row"> 

          <div class="col-xs-3 col-xs-3"> 

         <div class="panel panel-default"> 
           <div class="panel-heading text-center">Panel heading without title</div> 
           <div class="panel-body text-center"> 
           Panel content 
           </div> 
          </div> 


          </div> 

          <div class="col-xs-3 col-xs-3"> 

          <div class="panel panel-default"> 
           <div class="panel-heading text-center">Appointments</div> 
           <div class="panel-body text-center"> 
           Panel content 
           </div> 
          </div> 


          </div> 

          <div class="col-xs-3 col-xs-3"> 

          <div class="panel panel-default"> 
           <div class="panel-heading text-center">Panel heading without title</div> 
           <div class="panel-body text-center"> 
           Panel content 
           </div> 
          </div> 


          </div> 


          <div class="col-xs-3 col-xs-3"> 

          <div class="panel panel-default text-center"> 
           <div class="panel-heading">Panel heading without title</div> 
           <div class="panel-body text-center"> 
           Panel content 
           </div> 
          </div> 


          </div> 


         </div> 


      </div> 
      <!-- /.container-fluid -->

sidebar.php

<aside class="sidebar"> 

    <ul class="menu" id="menu"> 

    <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li> 


    <li><a href="doctors.php"><i class="fa fa-users"></i> Doctors</a></li> 
    <li><a href="nurses.php"><i class="fa fa-users"></i> Nurses</a></li> 

    <li><a href="patients.php"><i class="fa fa-users"></i> Patients</a></li> 
    <li><a href="#"><i class="fa fa-address-book-o"></i> Appointments</a></li> 


    </ul> 

</aside>

CSS:

.sidebar 

    { 

     float:left; 
     position: absolute; 
     top:0px; 
     left:0px; 
     background-color: #E0E0E0; 
     width:200px; 
     height: 100%; 

    }

источник

2017-02-17 steven

Прежде всего, большинство Ширмы-размеры I (не только 1512 х 473) на боковой панели был перекрыт текст. Поэтому я не уверен, что у меня достаточно информации, чтобы помочь вам.

Я принял bootstrap example и изменил содержание до вашего запроса. Я также включил кнопку переключения для боковой панели.

Вот HTML:

<html lang="en"> 

<head> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
</head> 

<body> 
    <div id="wrapper"> 
    <!-- Sidebar --> 
    <div id="sidebar-wrapper"> 
     <ul class="sidebar-nav"> 
     <li class="sidebar-brand"> 
      <a href="#"> 
      Sidebar Title 
      </a> 
     </li> 
     <li> 
      <a href="#">Dashboard</a> 
     </li> 
     <li> 
      <a href="#">Doctors</a> 
     </li> 
     <li> 
      <a href="#">Nurses</a> 
     </li> 
     <li> 
      <a href="#">Patients</a> 
     </li> 
     <li> 
      <a href="#">Appointments</a> 
     </li> 
     </ul> 
    </div> 
    <!-- /#sidebar-wrapper --> 

    <!-- Page Content --> 
    <div class="container-fluid"> 
     <!-- Page Heading --> 
     <div class="row"> 
     <div class="col-lg-12"> 
      <h1 class="page-header">Dashboard</h1> 
     </div> 
     </div> 
     <!-- /.row --> 
     <div class="row"> 
     <div class="col-xs-3 col-xs-3"> 
      <div class="panel panel-default"> 
      <div class="panel-heading text-center">Panel heading without title</div> 
      <div class="panel-body text-center"> 
       Panel content 
      </div> 
      </div> 
     </div> 

     <div class="col-xs-3 col-xs-3"> 
      <div class="panel panel-default"> 
      <div class="panel-heading text-center">Appointments</div> 
      <div class="panel-body text-center"> 
       Panel content 
      </div> 
      </div> 
     </div> 

     <div class="col-xs-3 col-xs-3"> 
      <div class="panel panel-default"> 
      <div class="panel-heading text-center">Panel heading without title</div> 
      <div class="panel-body text-center"> 
       Panel content 
      </div> 
      </div> 
     </div> 


     <div class="col-xs-3 col-xs-3"> 
      <div class="panel panel-default text-center"> 
      <div class="panel-heading">Panel heading without title</div> 
      <div class="panel-body text-center"> 
       Panel content 
      </div> 
      </div> 
     </div> 
     </div> 

     <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> 

    </div> 
    </div> 

    <!-- jQuery --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</body> 

</html>

Вот CSS:

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: fixed; 
    left: 250px; 
    width: 0; 
    height: 100%; 
    margin-left: -250px; 
    overflow-y: auto; 
    background: #eee; 
    -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; 
    background-color: #eee; 
} 

.sidebar-nav li { 
    text-indent: 20px; 
    line-height: 40px; 
} 

.sidebar-nav li a { 
    display: block; 
    text-decoration: none; 
    color: #555; 
} 

.sidebar-nav li a:hover { 
    text-decoration: none; 
    color: #666; 
    background: rgba(0, 0, 0, 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: #777; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #000; 
    background: none; 
} 


/* When the screen size is small, the sidebar will automatically collapse. */ 

@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; 
    } 
}

И Javascript (для складного боковой панели)

$("#menu-toggle").click(function(e) { 
    e.preventDefault(); 
    $("#wrapper").toggleClass("toggled"); 
});

Я надеюсь, что это поможет вашему проекту!

Codepen: http://codepen.io/penguoir/pen/YNMoyW

источник

2017-02-17 08:17:09

Спасибо вам так много :) – steven

Вы можете использовать @media запрос просто добавить Div тег в sidebar.php и поставить content.php к сНу тега и отображения: тем не Див. когда она достигает размер 1512

поболеть в

источник

2017-02-17 08:28:15

Хотя это может быть ценный намек, чтобы решить эту проблему, хороший ответ также демонстрирует решение. Пожалуйста, [править], чтобы предоставить пример кода, чтобы показать, что вы имеете в виду. В качестве альтернативы подумайте о том, чтобы вместо этого писать это как комментарий. –

Нажимайте содержимое в сторону от боковой панели при изменении размера экрана

ответ

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