Question

我需要动态地跨越2行col-md-6 div，即仅当某个角度var为真时。如果此var为false，则此div不会超过2行。我发现的关于这个主题的所有问题都没有解决这个动态问题。以下是两个选项，标有X的div需要动态更改。

我现在的HTML是：

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用bootstrap通过使用.container-fluid或.row-fluid类动态调整任何div的宽度。只要视口或其中的内容发生变化，它就会自动获取容器的宽度。但要动态调整高度bootstrap不会有帮助，你必须编写自己的自定义css。

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

将父div的显示属性设置为display:flex和flex-direction:column。这将垂直显示子元素。现在以您希望它们显示的比例为每个子div提供flex属性。例如，我对两个孩子都使用了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。

如何动态跨越2行的Bootstrap列

1 个答案: