0

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

var 为真时的选项 1

var 为 false 时的选项 2

我现在的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>

4

1 回答 1

1

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

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

将父 div 的 display 属性设置为display:flexand 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;
}

这是一个工作小提琴。

于 2015-10-24T18:31:12.080 回答