Question

我正在为我的页面使用固定的侧边栏，我正在使用引导程序来实现响应式设计。但是，当我尝试不同的屏幕分辨率时，我的内容将从屏幕上移出而不是下到第一个div。请参阅屏幕截图以获得更简单的解释。

我尝试了一切可能仍然无效。附件是问题和我的代码的截图。

预期输出（1440px工作正常）

错误：（1024px不起作用）

作品（954px有效）

HTML：

player2pp.sh

CSS：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <header>
        <div class="header_wrapper"></div>
    </header>


    <div class="sidebar">

        <div class="container">
            <div class="row">
                <div style="height: 70px;background: #5bd495;"></div>
            </div>
        </div>
    </div>

    <section>
        <div class="wrapper">
            <div class="container" style="padding-top:50px;">

                <div class="row">
                    <div class="col-md-7">
                        <div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
                    </div>

                    <div class="col-md-5">
                        <div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
                    </div>

                </div>
            </div>
        </div>
    </section>

</body>

</html>

任何帮助将不胜感激。

Answer 1

我用div包装器改变了div容器，并且做到了。 https://jsfiddle.net/jee7384b/13/

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">         </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <header>
      <div class="header_wrapper"></div>
    </header>
    <div class="sidebar">
      <div class="container">
        <div class="row">
          <div style="height: 70px;background: #5bd495;"></div>
        </div>
      </div>
    </div>
    <section>
      <div class="container" style="padding-top:50px;">
        <div class="wrapper">
          <div class="row">
            <div class="col-md-7">
              <div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
            </div>
            <div class="col-md-5">
              <div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

此外，您应该在css文件中设置样式。

固定边栏导致引导响应式设计出现问题

1 个答案: