flexbox + bootstrap 导致列转到下一行答案

【问题标题】：flexbox + bootstrap causing column to go to next lineflexbox + bootstrap 导致列转到下一行
【发布时间】：2015-11-03 21:25:38
【问题描述】：

我是尝试 flexbox 的新手。我将它与 bootstrap 相结合，以获得一个通用的流体网格。问题是，每当我将 flexwrap 放在行上时，即使 % 等于 100% 或接近于您使用的网格，列也会移动到下一行。 html：

<section class="row">
  <article class="block col-lg-6 img btm-right-title">
    <div class="content">
      <h1>Hello</h1><img src="assets/images/prod-grid-sq-mbrace.jpg" alt="Verizon Vehicle delivers next generation pinpoint roadside assistance, mechanics hotline, vehicle diagnostics">
    </div>
  </article>
  <article class="block col-lg-6 img btm-left-title">
    <div class="content">
      <h1>Goodbye</h1><img src="assets/images/prod-grid-wide-vv.jpg" alt="Verizon Vehicle delivers next generation pinpoint roadside assistance, mechanics hotline, vehicle diagnostics">
    </div>
  </article>
  <article class="block col-lg-4 title top-right-title">
    <div class="content">
      <h1>Title Block 1</h1>
    </div>
  </article>
  <article class="block col-lg-4 title top-left-title position-1">
    <div class="content">
      <h1>Title Block 2</h1>
    </div>
  </article>
  <article class="block col-lg-4 title center-title">
    <div class="content">
      <h1>Title Block 3</h1>
    </div>
  </article>
</section>

我故意将这些保留在一行中，因为 POC 需要根据屏幕大小重新排列每个块，所以我打算使用 flexbox 来实现这一点。

CSS：

*, html {
    margin: 0;
    padding: 0;
    line-height: .9em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.row {
    display: flex;
    max-width: 960px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.block {
    display: flex;
    position: relative;
    margin-bottom: 30px;
    order: 1;
}

.block .content {
    padding: 15px;
    display: flex;
    flex: 1 100%;
    flex-flow: row wrap;
    min-height: 300px;
}

.block .content h1 {
    margin: 0;
}

.block.title .content {
    background: red;
}

.block.btm-right-title .content {
    align-items: flex-end;
    justify-content: flex-end;
}

.block.btm-left-title .content {
    align-items: flex-end;
    justify-content: flex-start;
}

.block.top-left-title .content {
    align-items: flex-start;
    justify-content: flex-start;
}

.block.top-right-title .content {
    align-items: flex-start;
    justify-content: flex-end;
}

.block.center-title .content {
    align-items: center;
    justify-content: center;
}

.block.img h1 {
    color: #fff;
}

.block.title h1 {
    color: #fff;
    font-style: italic;
}

.img img {  
    width: 0;
    height: 0;
    opacity: 0;
}

.block.img .content {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

我正在使用 jquery 获取内容块中的图像以将它们设置为背景图像以允许背景大小的封面，但仍保持图像提供的 SEO 方面。这目前只是一个 POC，我只是在测试，所以可能有点草率。

两个 col-lg-6 应该并排，3 col-lg-4 也应该并排，而不是我得到这个：

【问题讨论】：

一般 flexbox 和 Bootstrap 不能很好地协同工作。后者使用与 flexbox 结合起来效果不佳的浮点数。加上flexbox 是关于 flexible 盒子，但 Bootstrap 在它的类上使用固定的 % 宽度。正如你所看到的，你在这里有相当的精神斗争。您可能需要再考虑一下。
如果我想获得特定的网格尺寸，我是否不需要定义宽度？您是否有任何其他建议可以提供 flexbox 提供的元素定位优势，同时仍使用请求的引导程序？

标签： html css twitter-bootstrap flexbox

【解决方案1】：

找出原因。 Bootstrap 将某些项目标记为显示表，这会导致与 flexbox 发生冲突。我用一个行类包装所有东西。 Bootstrap 有这个 css：

.btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before,   .panel-body:after, .panel-body:before, .row:after, .row:before {
 display: table;
 content: '';
}

制作这个显示：初始重置它并让一切按预期工作。

【讨论】：