将 Flexbox 与 bootstrap 3 和 laravel 4 blade 模板和关联的 LESS mixin 结合使用

Question

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

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

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

基本代码结构如下：

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

@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

如您所见，我们使用 partials 来包含三个垂直窗格。邮箱是具有 a 个链接的 2 个 div 的简单结构。单击其中之一会在中间窗格中显示电子邮件列表，其中将电子邮件列为无序列表项。最后，单击其中一项将在右侧的大窗格中显示所选电子邮件的内容。

我需要确保三个窗格或列的高度相等，而我们知道，css 在将相邻 div 的大小调整为相等高度方面存在限制。因此 flexbox 来拯救。

我的问题是关于 bootstrap 3 中如何支持 flexbox，以及在实现 flexbox 时是否需要特别考虑。我有以下基本的 css (LESS) mixins:

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

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

如有任何建议，我们将不胜感激。

Answer 1

我认为一种选择是覆盖您的 flexbox 区域的 bootstrap CSS。据我了解，您可以在 Bootstrap 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

因为你覆盖了 Bootstrap 的网格类你将有一个不支持 flexbox 的浏览器的回退。

我的代码不包含供应商前缀。在您的示例中，您使用 mixin 来设置这些供应商前缀。使用 (a) autoprefix post 处理器似乎是社区共识的更好做法。另见 LESS transition mixin with prefixes

将 Flexbox 与 bootstrap 3 和 laravel 4 blade 模板和关联的 LESS mixin 结合使用

Using Flexbox with bootstrap 3 and laravel 4 blade templates and associated LESS mixin

less

flexbox

blade

laravel-4

twitter-bootstrap-3