使用自举3和4 laravel刀片模板Flexbox的和相关LESS混入(Using Flexbox

我想实现一个Flexbox的解决方案，以显示在线邮箱系统的某个站点正在开发中。基本设计我需要实现显示在线框：

与红色边框的区域是我需要实现Flexbox的。

由于发展与Laravel刀片诱人引擎完成的，我们使用包括文件生成三个窗格的内容（左邮箱中的电子邮件列表，右电子邮件浏览器）。

基本码结构如下：

这第一个代码段设置为收件箱中的观点：

@extends('layouts.master')

@section('content')
  <div class="content-container" ng-app="cs" ng-controller="MessagingCtrl">
    <div class="content-pane message-centre">
      <div class="row email-container">
        <div class="col-xs-12 header">
          <h3>Message Centre</h3>
        </div>
      </div>
      <div class="row email-panes">
        <div class="col-xs-2 mailboxes">
          @include('messages.partials.sidebar', ['active' => 'inbox'])
        </div>
        <div class="col-xs-3 emails">
          @include('messages.partials.message-list')
        </div>
        <div class="col-xs-7 email-viewer">
          @if(isset($message_opened))
            @include('messages.partials.message', ['message' => $message_opened])
          @endif
        </div>
      </div>
    </div>
  </div>
@stop

@section('scripts')
  {{HTML::script('assets/js/modules/cs.js')}}
  {{HTML::script('assets/js/app/configurations/messaging.js')}}
  {{HTML::script('assets/js/app/controllers/MessagingCtrl.js')}}
@stop

正如你所看到的，我们使用的谐音 ，包括三个垂直窗格。邮箱是2周的div以简单的结构a链接。点击其中一个，显示在其中列举了电子邮件作为无序列表项中间窗格中的电子邮件列表。最后，点击这些项目中的一个将在大右窗格中显示所选电子邮件的内容。

我需要确保这三个窗格或列的高度相等，而且我们知道，CSS在上浆相邻的div等于高度的限制。因此Flexbox的救援。

我的问题是关于Flexbox的是如何在引导3的支持，如果有什么特殊的考虑，我需要在实施Flexbox的制作。我有以下的基本CSS（LESS）的混入：

.flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.flex(@values) {
  -webkit-box-flex: @values;
  -moz-box-flex:  @values;
  -webkit-flex:  @values;
  -ms-flex:  @values;
  flex:  @values;
}
.order(@val) {
  -webkit-box-ordinal-group: @val;
  -moz-box-ordinal-group: @val;
  -ms-flex-order: @val;
  -webkit-order: @val;
  order: @val;
}
.wrapper {
  .flexbox();
}
.item {
  .flex(1 200px);
  .order(2);
}

具体而言，我需要就如何落实少，以适应电网举一些建议和帮助。

任何意见，将不胜感激。

我认为一个选项将覆盖你的Flexbox的区域引导CSS。据我了解，你可以后（或结束）的引导CSS代码应用以下CSS代码：

.row.email-panes {
display: flex;
}      
.row.email-panes .col-xs-2{
flex-grow:2;
background-color: green;          
}
.row.email-panes .col-xs-3
{
flex-grow:3;
} 
.row.email-panes .col-xs-7{
flex-grow:7;
background-color: red;
}

以下（一些嵌套）：

.row.email-panes {
    display: flex;

    .col-xs-2{
    flex-grow:2;
    background-color: green;          
    }

    .col-xs-3
    {
    flex-grow:3;
    } 

    .col-xs-7{
    flex-grow:7;
    background-color: red;
    } 
}

演示： http://codepen.io/anon/pen/yyVMVo

因为你覆盖引导的网格类，你将不得不为不支持Flexbox的太浏览器的回退。

我的代码不包含供应商前缀。在您的例子中，你使用混入设置这些供应商前缀。使用（a）autoprefix后处理器似乎是社会的共识，更好的做法。还看到有前缀LESS过渡混入