Question

我希望每当我的屏幕大小达到1512 x 473时，content.php内的内容就不会重叠到左侧边栏上。因为这使得侧边栏链接不可读。非常感谢帮助人员:)

content.php

this.primaryUi().on("input", () => { // Yay, cool arrow functions.
    this.updateSliderText(lowDisplay, highDisplay);
});

this.primaryUi().on("input", (function() {
    this.updateSliderText(lowDisplay, highDisplay);
}).bind(this)); // yay...? old-bind-style

的sidebar.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 -->

CSS：

<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>

Answer 1

首先，我使用的大多数屏幕尺寸（不仅是1512 x 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

Answer 2

您可以使用@media查询在sidebar.php中添加div标签，并将content.php放到div标签中并显示：none div。当它达到1512的大小

欢呼＆＃39; S

在重新调整屏幕大小时，将内容从侧边栏推出

2 个答案: