如何动态跨越 2 行的 Bootstrap 列答案

【问题标题】：How to span a Bootstrap column over 2 rows dynamically如何动态跨越 2 行的 Bootstrap 列
【发布时间】：2016-01-23 21:17:42
【问题描述】：

我需要动态地将col-md-6 div 跨越 2 行，即仅当某个角度变量为真时。如果此 var 为 false，则此 div 不会跨越 2 行。我发现的关于这个主题的所有问题都没有解决动态方面。这里有两个选项，标有X的div需要动态变化。

Option 1 when var is true

Option 2 when var is false

我现在的html是这样的：

<div class="container">

        <div class="col-md-7 col-lg-7">
            
            <div class="row">
                <p>text</p>
            </div>
            
            <div class="row">
                <p>text </p>
            </div>
        </div>

        <div class="col-md-5 col-lg-5">

            <div class="row">
                <div ng-class="show ? ['col-lg-6','col-md-6'] : ['col-lg-12','col-md-12']">
                    <p>text</p>
                </div>
                <div ng-if="show" class="col-md-6 col-lg-6">
                    <p>text</p>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 col-lg-6">
                    <p> text</p>
                </div>
                <div class="col-md-6 col-lg-6">
                    <p> text</p>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 col-lg-6">
                    <p>text</p>
                </div>
                <div ng-if="show">
                    <p>text</p>
                </div>
            </div>

        </div>

    </div>

【问题讨论】：

标签： html angularjs twitter-bootstrap web-frontend

【解决方案1】：

您可以使用引导程序通过 .container-fluid 或 .row-fluid 类动态调整任何 div 的宽度。每当其父级中的视口或内容发生变化时，它将自动采用容器的宽度。但是要动态调整高度引导程序无济于事，您必须编写自己的自定义 css。

我采用的方法是使用 flexbox css 布局模型。您可以使用此link 了解更多信息。

将父div的显示属性设置为display:flex和flex-direction:column。这将垂直显示子元素。现在以您希望它们显示的比例将flex 属性分配给每个子 div。例如，我对两个孩子都使用了flex:1。这将以相同的高度显示它们。

现在应用ng-if 指令。当底部 div 从 DOM 中删除时，顶部 div 会自动填充父容器。

html:

<div ng-controller="MyCtrl">
  <label>Show Y</label> <input type="checkbox" ng-model="checked" ng-init="checked=true"> 

  <div class="container">
    <div class="row-fluid">
        <div class="col-xs-6">Hello</div>
        <div class="col-xs-6 wrap">
            <div class="top">X</div>
            <div class="bottom" ng-if="checked">Y</div>
        </div>
    </div>
</div>

css:

.wrap{
   background-color:#e3e;
   height:40px;
   display: -webkit-flex;
   display: flex;
   flex-direction: column; 
}

.top{
   background-color:#ccc;
   flex:1;
}

.bottom{
   background-color:#afc;
   flex:1;
}

这是一个有效的fiddle。

【讨论】：