Html CSS3 Flex和引导

使用这个例子，我试图使引导布局列的高度相等，并且仍然是完全响应的

我试图了解CSS在示例中是如何工作的，但仍然没有破解它。使用我自己的SASS，布局在大屏幕上看起来很好，但在我将“自动”添加到flex之前，这些列在小屏幕上没有响应

如果您能在所有尺寸的屏幕上使用，将不胜感激

HAML/引导程序：

%section.row.row-flex.row-flex-wrap
  .col-xs-12.col-sm-12.col-md-8.col-lg-8.column-flex
    .flex-col
      = field('block_2')
  .col-xs-12.col-sm-12.col-md-4.col-lg-4.column-flex.one-column
    .row 
      .col-xs-12.col-sm-6.col-md-12.col-lg-12
        .events-image-block
          = field('block_3')
      .col-xs-12.col-sm-6.col-md-12.col-lg-12
        = field('block_4')
%section.row.row-flex.row-flex-wrap
  .col-xs-12.col-sm-6.col-md-4.col-lg-4.column-flex.one-column
    .flex-col
      = field('block_5')
  .col-xs-12.col-sm-6.col-md-4.col-lg-4.column-flex.one-column
    .flex-col
      = field('block_6')
  .col-xs-12.col-sm-12.col-md-4.col-lg-4.column-flex.one-column
    .flex-col
      = field('block_7')

SASS：

---

我真的会开始远离引导IMHO。添加一个最小宽度的媒体查询，并且只在给定的断点处开始调整。我知道您只在寻找CSS，但这里有一个jQuery插件，可以很好地与BS配合使用：。如果你只想通过CSS来实现，那么你可以在这里玩：。我相信这个例子应该能让你达到你想要的目的：col-xs-12.col-sm-12.col-md-4.col-lg-4.是多余的，只需要col-md-4，然后在你的flex中将断点设置为min width:992px。我明白你想做什么了。如果您想使用flex，则Bootstrap的网格是错误的作业工具。

section.row-flex {
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -moz-box;
  display: flex;
  webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;

  &.row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    webkit-flex: 0;
    -ms-flex: 0;
    flex: 0;
  }

  & > .column-flex {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    margin: -.2px;

    &.one-column {
      webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }
  }

  .flex-col,
  .flex-col > div {
    flex-flow: column nowrap;
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .flex-grow {
    display: flex;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
  }
}