Question

我目前正在构建一个网页并遇到以下问题，如果有人帮我解决了，我将不胜感激：

我希望页面的每个“部分”（div）都有一个全角背景图像。在此背景下，内容（文本）的div较小。在右侧，有一个滚动的侧边栏，与用户滚动。我找不到如何使用全角div和侧边栏（这是一个带有后代的div元素）？

目前的结构如下：

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="col-md-9">
      here go all the "sections"...
    </div>
    <div class="col-md-3">
      and that is the sidebar...
    </div>
  </div>
</body>

简而言之，我们需要的是背景图像，其上面有一些html内容，右边是侧边栏（但被图像覆盖）。提前谢谢！

Answer 1

所以我猜这意味着你打算制作一个固定的侧边栏？您需要将列放在一行中。使行具有背景图像。将侧边栏定位固定，这使得引导类无效，但您可以使宽度为25％，以便保持响应。你可能需要添加一些填充/边距，但我用随机颜色快速制作了一些东西，这样你就可以得到这个想法。

#sidebar{
  position:fixed;
  right:0;
  top:0;
  background-color:rgba(0,0,0, .5);
  width:25%;
  color:white;
}
.blue{
  background-color:blue;
}
.white{
  background-color:white;
}
.red{
  background-color:red;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row red">
      <div class="col-md-9">
        Section 1
      </div>
      <div class="col-md-3" id="sidebar">
        and that is the sidebar...<br/>
        ber<br/>
        baer
        badsr
      </div>
    </div>
    <div class="row white">
      <div class="col-md-9">
        Section 2
      </div>
    </div>
    <div class="row blue">
      <div class="col-md-9">
        Section 3
      </div>
    </div>
  </div>
</body>

Answer 2

您需要在容器类之外创建一个div。该div可以设置为全宽。

    <div class="row"> <!-- begins full width row-->

      <div class="container">
         <div class="col-md-9">
             here go all the "sections"...
         </div>
         <div class="col-md-3">
          and that is the sidebar...
         </div>
      </div>

    </div><!-- ends full width row-->

背景图像扩展到整体侧边栏的部分

2 个答案: