Laravel 4 使用Flexbox与bootstrap 3和laravel 4刀片模板以及相关的较少混合

我正在尝试实现一个flexbox解决方案，为正在开发的站点显示一个内联邮箱系统。我需要实现的基本设计显示在线框中：

带有红色边框的区域是我需要实现flexbox的地方

由于开发是使用Laravel Blade诱惑引擎完成的，我们使用包含的文件生成三个窗格（左侧邮箱、中间电子邮件列表和右侧电子邮件查看器）的内容

基本代码结构如下所示：

第一个代码段设置收件箱的视图：

@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

具体来说，我需要一些关于如何实现LESS以适应引导网格的建议和帮助

---

任何建议都将不胜感激。

我认为一种选择是覆盖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;
} 

或更少（带有一些嵌套）：

演示：

因为您覆盖了引导的网格类，所以对于不支持flexbox的浏览器，您将有一个回退

---

我的代码不包含供应商前缀。在您的示例中，您使用mixin来设置这些供应商前缀。社区一致认为，使用（a）autoprefix后处理器似乎是更好的做法。另请参见

@harry这将是我第一次尝试使用flexbox，因此我要谨慎行事。@harry iSume我应该能够覆盖专门用于此布局的引导网格，并且我可以修改刀片模板。真正的问题是正确地实现flexbox，使其能够顺利工作。我想，如果flexbox不起作用，还有其他不那么优雅的解决方案，但我宁愿先尝试一下flexbox，然后再回到不那么灵活（双关语）的布局解决方案。因此，任何帮助都将不胜感激。你的伴侣看起来不错。是一个示例flex box演示，您会发现它很有用。使用

flex grow:2

而不是速记

flex:2 0 auto

有什么好处？我同意使用前置器。我为dev定义了混合，因为我在使用gulpless、gulpprefixer、gulpminifycss和gulpsourcemap生成源代码映射时遇到问题。一旦我转到proud，我将放弃mixin并重新启用Prefixer。不使用速记没有任何优势，我刚刚编写了一个示例，说明如何在引导网格中使用灵活的方框。请注意，

0

和

auto

已经是初始值，因此您也可以编写

flex:2

。可能会为你的工作流程提出一个新问题。我认为您不应该使用gulp sourcemap，而应该使用其他插件的sourcemap选项。我尝试为邮箱头添加col-xs-12，我的理解是，不需要嵌套，就可以让flexbox自动换行到新行。因此，col-xs-12将是全宽的，col-xs-2、col-xs-3和col-xs-7可以在新的一行上相互缠绕和对齐。请参阅此代码笔：欢迎提供任何建议。为什么不使用两行？`一些头衔`

.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;
    } 
}