Bootstrap：容器中带有列的全宽网格

Posted 2023-03-06

【中文标题】Bootstrap：容器中带有列的全宽网格

【英文标题】：Bootstrap: Full width grid with columns in container

【发布时间】：2017-01-24 23:54:17

【问题描述】：

我想创建一个全宽布局，左侧为蓝色半边，右侧为红色半边。

之后我想在布局内但在容器内添加文本。

这可能吗？

编辑：您可以看到，绿色容器的大小与蓝色和红色一半内的 col-6 不同。

* 
  color: white;

.blue-half 
  background: blue;

.red-half 
  background: red;

.green 
  background: green;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container green">
  I am the normal container!
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container-fluid text-center">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am first half of the blue container!
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am second half of the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container-fluid text-center">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am first half of the red container!
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am second half of the blue container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

这就是我正在阅读的内容：“我想要一个绿色容器占据前半部分，将后半部分分成两半（即四分之一），然后将那些半部分分成两半”。如果这不完全正确，那么也许创建所需布局的图像并将其用作示例？

类似这样的东西（蓝色部分“我们是谁”）：stripe.com/about - 两个半列的背景应该是全宽的，内容应该与引导程序中的普通容器的宽度相同.

这就像使用 container 替换 container-fluid 并在蓝色/红色一半内使用 col-*-12 一样简单。我会适当地更新我的回复

【参考方案1】：

试试这个

<div class="container-fluid">
 <div class="row">
    <div class="col-xs-6 blue">
        <div class="container">
            <!--content-->
        </div>
    </div>
    <div class="col-xs-6 red">
        <div class="container">
            <!--content-->
        </div>
    </div>
 </div>

CSS

  .red
    background: red;
   
  .blue
    background: blue;
  

【讨论】：

伙计，总有人比我强！

感谢您的帮助。但这并不完全是我的意思。现在内容位于列内的容器中。我需要的是两个列的内容组合在一个容器的宽度中（在布局中居中）。例如：屏幕尺寸为 3000px 宽。每列（蓝色和红色）。宽度为 1500 像素。现在我需要一个在布局中心有一个 1140px 的容器和两个“col-6”列。我希望你明白我想说什么:)

我不太确定你在问什么。根据您的评论，我正在阅读您想要两个主要列，红色和蓝色，然后这些列的内容居中，并且该内容也分成两半，即蓝色内容和红色内容中的另外两列。对吗？

我对我的回答进行了更新，以反映我对您的评论的理解。让我知道您所描述的是否是这样的

【参考方案2】：

这样的？

*  color: white; 

.blue-half 
  background: blue;


.red-half 
  background: red;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container-fluid text-center">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am first half of the blue container!
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am second half of the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container-fluid text-center">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am first half of the red container!
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am second half of the red container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

更新 我试图从您的评论中创建我正在阅读的内容，重新调整格式不正确

更新 2

.row-green 
  background: green;
  color: white;

.blue-half 
  background: blue;
  color: white;


.red-half 
  background: red;
  color: white;


.option1 .row .container 
  padding: 0;


.option2 .container.unindent 
  padding: 0;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid option1">
  <h3>Option 1</h3>
  <p>
    This uses a .row .container selector rule to enforece the padding removal on containers nested in rows.
  </p>
  <div class="row row-green">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      I am the row above!
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the red container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid option2">
  <h3>Option 2</h3>
  <p>
    This uses an unindent CSS class on the containers that need to have the padding removed
  </p>
  <div class="row row-green">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      I am the row above!
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container unindent">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container unindent">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the red container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

非常感谢！但正如我在对 Damians 回答的评论中所写的那样，这并不是我的意思。抱歉，我的问题可能有点不清楚。

再次感谢。我还在我的问题中添加了一个示例代码。您可以看到，内容的开头与绿色容器不在同一行。这就是我努力实现的目标

那么你想让“普通容器”与红色和蓝色半容器在同一行吗？

非常感谢您的帮助。但结果仍然不是我的意思。抱歉 :( 绿色容器中的文本与蓝色容器中的文本不对齐。

嗯，但现在它仍然不在容器的宽度内。相反，内容也是全尺寸的。也许我的问题不清楚。我自己再试一次，或者必须更清楚我需要什么。再次感谢！

【参考方案3】：

变体2.将容器分成两部分

您可以为容器的每一半定义一个新类。但在此解决方案中，您需要控制两半具有相同的高度。

.blue  background: blue; color: white; 
.red   background: red;  color: white; 

.container-left-half,
.container-right-half 
  padding-right: 15px;
  padding-left: 15px;

.container-left-half 
  margin-right: 0;
  margin-left: auto;

.container-right-half 
  margin-right: auto;
  margin-left: 0;

@media (min-width: 768px) 
  .container-left-half,
  .container-right-half 
    width: 375px;
  

@media (min-width: 992px) 
  .container-left-half,
  .container-right-half 
    width: 485px;
  

@media (min-width: 1200px) 
  .container-left-half,
  .container-right-half 
    width: 585px;
  

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 blue">
      <div class="container-left-half">
        <div class="row">
          <div class="col-xs-12">This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue!</div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 red">
      <div class="container-right-half">
        <div class="row">
          <div class="col-xs-12">This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red!</div>
        </div>
      </div>
    </div>
  </div>
</div>

变体 1. 线性渐变和套娃

1) 您可以使用the linear-gradient() function 制作双色背景。

2) Bootstrap 有rows 和two types of containers：

将.container 用于响应式固定宽度容器。

将.container-fluid 用于全宽容器，跨越视口的整个宽度。

行必须放置在.container（固定宽度）或.container-fluid（全宽度）内，以便正确对齐和填充。

3) 这样你就可以制作套娃了：.container-fluid > .row with linear-gradient > .container > .row with content

Matryoshka 是一套颜色鲜艳的空心木娃娃，大小不一，旨在相互嵌套。

4) col-xs-6 等价于col-xs-6 col-sm-6 col-md-6 col-lg-6。

.two-colors 
  background: linear-gradient(to right, blue 50%, red 50%);
  color: white;

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row two-colors">
    <div class="container">
      <div class="row">
        <div class="col-xs-6">This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue!</div>
        <div class="col-xs-6">This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red!</div>
      </div>
    </div>
  </div>
</div>

【讨论】：

感谢您的帮助。线性渐变的想法很好。我希望有一个没有 CSS 技巧的解决方案。在这个版本中，我只能在背景中使用颜色，而不能使用图像。

@Simon 我添加了第二个变体。请检查。

【参考方案4】：

试试这个：

  <div class="container">
    <div class="row">
      <div class="col-md-6">Left Column</div>
      <div class="col-md-6 col-expand">Right Column</div>
    </div>
  </div>

CSS：

.col-expand 
    position: absolute;
    background-color: orange;
    width: 100%;
    right: 0px;