引导程序4

Question

我试图找出如何在Bootstrap 3中实现以下功能：

我有一个HTML页面，主要基于bootstrap的固定容器网格。
在页面的下半部分，我想要一行不同大小的列。
我希望这些列中的内容（文本/图像）与固定容器网格中列内的内容对齐。
我希望左右最远列的背景颜色直接渗到页面边缘。

如果我说明我想要实现的目标，可能会有所帮助：

非常感谢任何帮助！

更新按照此处的要求提供了我当前所拥有的一些代码示例：http://www.bootply.com/ZzOefJGRRq正如您所看到的那样，流体容器中的文本和列未正确排列

Answer 1

您可以使用:before元素和某些类

https://jsfiddle.net/ex3ntia/wa8myL9v/2/

.bg:before {position:absolute;left:0em; content:'';height:100%;width:800em;z-index:-1}

<强>更新

为小型设备添加了媒体查询 https://jsfiddle.net/ex3ntia/wa8myL9v/3/

更新2

我添加了以下行来修复Chrome浏览器上的大水平滚动。

body, html {overflow-x: hidden;margin: 0;padding: 0;}

Answer 2

引导程序4

在宽度为50vw的元素之前或之后使用绝对位置

Codepen

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      ...
    </div>
  </div>  
  <div class="row">
    <div class="col-lg-6 c-col-bg--red">
      ...
    </div>
    <div class="col-lg-6 c-col-bg--blue">
      ...
    </div>
  </div>
</div>

CSS

.container-fluid {
    max-width: 1000px;
}

@media (min-width: 992px) {
    div[class*="c-col-bg"] {
        position: relative;
    }

    div[class*="c-col-bg"]:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: -1;
        width: 50vw;
    }

    .c-col-bg--red:after {
        right: 0;
        background: red;
    }

    .c-col-bg--blue:after {
        left: 0;
        background: blue;
    }
}

Answer 3

TLDR；没有框架可以立即使用，因为涵盖所有可能的用例既非常复杂，又会导致大量代码。

这是可行的，但需要一些手动编码。下面的方法适用于2列。更多的列和断点将需要更复杂的解决方案。

示例标记：

<div class="container">
  <div class="row">
    <div class="col-5">default column</div>
    <div class="col-7">default column</div>
  </div>
</div>
<div class="container container--fluid">
  <div class="row">
    <div class="col-5">fluid column, aligned with above</div>
    <div class="col-7">fluid column, aligned with above</div>
  </div>
</div>
<div class="container container--bleed">
  <div class="row">
    <div class="col-5">
      <div class="content">like fluid, but content is aligned with default</div>
    </div>
    <div class="col-7">
      <div class="content">like fluid, but content is aligned with default</div>
    </div>
  </div>
</div>

简洁起见

  // assuming you have these values or able to set them
  $max-width: 1140px;
  $gutter: 8px;
  $grid: 12;
  $customColumns: [5, 7]; // columns you want to align

  // sample grid
  .container {
    max-width: $max-width;
    margin: 0 auto;
    padding-left: $gutter;
    padding-right: $gutter;
  }
  .row {
    display: flex;
    margin-left: -$gutter;
    margin-right: -$gutter;
  }
  div[class^='col'] {
    max-width: 100%;
    padding-left: $gutter;
    padding-right: $gutter;
    position: relative;
  }
  @for $i from 1 through $grid {
    .col-#{$i} {
      width: calc(100% * #{$i} / #{$grid});
    }
  }
  .container--bleed, .container--fluid {
    max-width: none;
  }
  
  // custom grid rules for alignment
  @media(min-width: #{$max-width}) {
    @each $i in $customColumns {
      .container--bleed, .container--fluid {
        .col-#{$i}:first-child, .col-#{$i}:last-child {
          width: calc(#{$max-width * $i / $grid} + ((100% - #{$max-width}) / 2));
        }
      }
      .container--bleed {
        .col-#{$i}:first-child { 
          padding-left: calc((100% - #{$max-width}) / 2 + #{$gutter});
        }
        .col-#{$i}:last-child { 
          padding-right: calc((100% - #{$max-width}) / 2 + #{$gutter});
        }
      }    
    }
  }

我在此处https://codepen.io/bariscc/pen/BajKpMP

为类似的布局创建了一个Codepen POC

Answer 4

您可以实施container-fluid来实现此目标。

基本上，您的网页将具有以下结构：

<div class="container">
   <p>Content here</p>
</div>
<div class="container-fluid">
   <p>"Bleeded" content here</p>
</div>
<div class="container">
   <p>And it continues with the fixed width!</p>
</div>

如果您需要调整这些容器之间的空格，您可以将自己的类或ID：s添加到每个容器中，并从那里获取它。由于Bootstrap中的容器没有多少默认样式，因此这是创建您在此处所要做的事情的非常有效的方式。

编辑：在检查评论部分并查看您提供的代码后，我假设您想拥有流体容器，但保持其中的内容与固定容器对齐，对吧？

为此，您可以在<div class="container">...</div>中添加另一个container-fluid。查看updated fiddle。

Answer 5

如果你有特殊的行，你需要一个带有容器流体类的div，它用一个容器类封装一个div（这是一个固定的宽度类）。

然后你需要考虑到任何一方的背景颜色。在容器的每个容器中添加额外的div，并在容器的每一侧添加背景颜色，或者使用三列表。

启用引导程序列背景以渗透到视口的边缘

5 个答案:

引导程序4

HTML

CSS