使用Flexbox与bootstrap 3和laravel 4刀片模板以及相关的LESS mixin [英] Using Flexbox with bootstrap 3 and laravel 4 blade templates and associated LESS mixin
问题描述
我试图实施一个flexbox解决方案来显示正在开发的网站的内联邮箱系统。我需要实现的基本设计显示在线框中：
带有红色边框的区域是我需要实现flexbox的区域。
<由于使用Laravel Blade Tempting引擎进行开发，我们使用包含的文件来生成三个窗格（左侧邮箱，中间电子邮件列表和右侧电子邮件查看器）的内容。
基本的代码结构如下：
这第一个代码片段设置了收件箱的视图：
@extends（'layouts.master'）
@section（'content'）
< div class =content-pane message-center>
< div class =row email-container>
< div class =col-xs-12 header>
< h3>消息中心< / 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 <包括三个垂直窗格。邮箱是一个简单的2个div的结构，其中 a 链接。点击其中一个显示中间窗格中的电子邮件列表，枚举电子邮件作为无序列表项目。最后，点击这些项目中的一个将在右侧大窗格中显示所选电子邮件的内容。
我需要确保三个窗格或列是相等的高度，正如我们所知，css在确定相邻div的高度上有限制。因此，flexbox来救援。我的问题是关于flexbox是如何支持引导3，如果有什么特殊的考虑，我需要在实施flexbox。我有以下基本的CSS（LESS）mixins： 任何建议，将不胜感激。 我想一个选项是覆盖Flexbox区域的引导CSS。 或更少（有一些嵌套）： 演示： http://codepen.io/anon/pen/yyVMVo 原因如果您覆盖了Bootstrap的网格类，那么对于不支持Flexbox的浏览器也会有一个回退。 我的代码不包含供应商前缀。在你的例子中，你使用mixins来设置这些供应商前缀。使用（a）autoprefix后置处理器似乎更好地通过社区共识实践。另请参见带有前缀的LESS转换混合 I am trying to implement a flexbox solution to display an inline mailbox system for a site that is in development. The basic design I need to implement is displayed in the wireframe : The zone with the red border is where I need to implement the flexbox. As the development is done with Laravel Blade Tempting engine, we're using included files to generate the content of the three panes (left mailboxes, middle email list and right email viewer). The basic code structure is as follows: This first code snippet sets up the view for the Inbox: As you can see, we're using partials to include the three vertical panes. The mailboxes is a simple structure of 2 divs with I need to make sure that the three panes or columns are of equal height, and as we know, css has limitations in sizing adjacent divs to be of equal height. Thus flexbox to the rescue. My question is regarding how flexbox is supported in bootstrap 3, and if there are any special considerations I need to make in implementing flexbox. I have the following basic css (LESS) mixins: Specifically, I need some advice and help on how to implement the LESS to accommodate the bootstrap grid. Any advice would be appreciated. I think one option will be to overwrite the bootstrap CSS for your flexbox area.
As far as i understand you can apply the following CSS code after (or at the end of) the Bootstrap CSS code: Or Less (with some nesting): demo: http://codepen.io/anon/pen/yyVMVo Cause you overwrite the Bootstrap's grid classes you will have a fallback for browsers that not support the flexbox too. My code does not contain vendor prefixes. In your example you use mixins to set these vendor prefixes. Using (a) autoprefix post processor seems to be better practice by consensus of the community. also see LESS transition mixin with prefixes 这篇关于使用Flexbox与bootstrap 3和laravel 4刀片模板以及相关的LESS mixin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
$ p $ .flexbox（）{
display：-webkit-box ;
显示：-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;
命令：@val;
}
.wrapper {
.flexbox（）;
}
.item {
.flex（1 200px）;
.order（2）;
$ b特别是，我需要一些建议和帮助如何实现LESS容纳
据我所知，您可以在引导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;
$ / code $ / pre
.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;
$ / code $ / pre
$ b
@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
a links. Clicking on one of them displays the list of emails in the middle pane which enumerates the emails as unordered list items. Finally, clicking on one of those items will display the contents of the selected email in the large right pane..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);
}
.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;
}
}
