Html 重新调整屏幕大小时，将内容推离侧边栏_Html_Css_Twitter Bootstrap_Responsive Design_Media Queries

Html 重新调整屏幕大小时，将内容推离侧边栏

html css twitter-bootstrap responsive-design

Html 重新调整屏幕大小时，将内容推离侧边栏,html,css,twitter-bootstrap,responsive-design,media-queries,Html,Css,Twitter Bootstrap,Responsive Design,Media Queries,我希望每当我的屏幕大小达到1512 x 473时，content.php中的内容不会重叠到左侧边栏上。因为这使得侧边栏链接不可读。非常感谢大家的帮助：） content.php <div class="container-fluid">  <div class="row"> <div class="col-l

我希望每当我的屏幕大小达到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 -->

首先，我使用的大多数屏幕尺寸（不仅仅是1512x473）的边栏上都有重叠的文本。所以我不确定我是否有足够的信息来帮助你

我拍了一张照片并将内容更改为您要求的内容。我还为侧边栏添加了一个切换按钮

以下是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>

和Javascript（用于可折叠侧栏）

我希望这有助于您的项目

Codepen:

您可以使用@media query，只需在sidebar.php中添加div标记，并将content.php放入div标记，当div达到1512大小时显示：none

Chee的

虽然这可能是解决问题的一个有价值的提示，但一个好的答案也说明了解决方法。请提供示例代码来说明您的意思。另一方面，请考虑将此作为评论来写。非常感谢：

.sidebar

    {

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

    }

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

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

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