如何动态跨越 2 行的 Bootstrap 列

Question

我需要动态地将 col-md-6 div 跨越 2 行，即仅当某个 angular var 为真时。如果此 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>

Answer 1

您可以使用 bootstrap 通过使用 .container-fluid 或 .row-fluid 类动态调整任何 div 的宽度。只要视口或其中的内容 parent 发生变化，它就会自动采用容器的宽度。但是动态调整高度 bootstrap 无济于事，您将不得不编写自己的自定义 css.

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

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

现在应用 ng-if 指令。当底部 div 从 DOM 中移除时，顶部 div 自动填满 parent 容器。

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。

如何动态跨越 2 行的 Bootstrap 列

How to span a Bootstrap column over 2 rows dynamically

html

angularjs

twitter-bootstrap

web-frontend