html - 固定引导内容

Question

使用 Bootstrap 处理响应式模板并尝试创建类似

我明白了，bg 可以是 .container-fluid ，但内容是 container 对齐的。如何才能做到这一点？现在我有了这个结构

<div class="services">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-md-4 services-black">
                <h1>SEO Optimized</h1>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
                </p>
            </div>
            <div class="col-12 col-md-4 services-red">
                <h1>Responsive</h1>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
                </p>
            </div>
            <div class="col-12 col-md-4 services-green">
                <h1>Cloud Services</h1>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
                </p>
            </div>
        </div>
    </div>
</div>

现在文本被拉伸(stretch)到容器的整个宽度。我是否需要嵌套容器，例如

<div class="container-fluid">
    <div class="container">
        ..
    </div>
</div>

还是别的？如何正确实现？

Answer 1

渐变方式

您可以分配 background:linear-gradient(to right,black,black,green,green)以获得所需的背景。和 container作为您的内容的类别。

.services {
  background: linear-gradient(to right, black, black, green, green);
}

.services-red {
  background: red;
  color: white;
}

.services-green {
  background: green;
  color: white;
}

.services-black {
  background: black;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="services">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-4 services-black">
        <h1>SEO Optimized</h1>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        </p>
      </div>
      <div class="col-12 col-md-4 services-red">
        <h1>Responsive</h1>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        </p>
      </div>
      <div class="col-12 col-md-4 services-green">
        <h1>Cloud Services</h1>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        </p>
      </div>
    </div>
  </div>
</div>

Bootstrap+Flex方式

如何实现您期望的空间:

1. 再买一个<div>在你的里面 services-*
2. 根据您的方便为其指定宽度。

3. 在你的容器上，即 services-*给出以下属性

   .services-black{
     display:flex;
     justify-content:flex-end; // Align box to right
   }
   .services-green{
     display:flex;
     justify-content:flex-start;  //Align box to left
   }
   .services-red{
     display:flex;
     justify-content:center;    //Align box to center
   }
   

.cloud,
.seo,
.responsive {
  width: 60%;
}

.services-black {
  background: black;
  color: white;
  display: flex;
  justify-content: flex-end;
}

.services-green {
  background: green;
  color: white;
  display: flex;
  justify-content: flex-start;
}

.services-red {
  background: red;
  color: white;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .cloud,
  .seo,
  .responsive {
    width: 100%;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="services">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 col-md-4 services-black">
        <div class="seo">
          <h4>SEO Optimized</h4>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
          </p>
        </div>
      </div>
      <div class="col-12 col-md-4 services-red">
        <div class="responsive">
          <h4>Responsive</h4>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
          </p>
        </div>

      </div>
      <div class="col-12 col-md-4 services-green">
        <div class="cloud">
          <h4>Cloud Services</h4>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
          </p>
        </div>

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