Question

我想使用<div ng-repeat="r in rooms">在<div>的中间输出ng-repeat - 但横幅$index==位于父<div>内，所以它不会越过屏幕的整个宽度。我曾尝试在横幅上使用container，但它的尺寸更小。有没有办法打破父容器（只为那个div，在class="container-fluid"的中间）以使Banner全宽？

这就是我希望它的外观（仅出于视觉目的，需要使用ng-repeat输出div）：Plunker-1

这就是它目前的样子：Plunker-2

Answer 1

以下是解决方案：https://plnkr.co/edit/pYO1G8M3jIDXHrRSE4YE?p=preview

你不需要容器 - 液体来实现你想要的目标。

 <div class="col-md-12" id="Banner" ng-if="$index==8">

               <div class="well well-sm text-center">
                  Banner

              </div>
 </div>

Answer 2

你很接近，试试这个：

<div id="content">
  <div class="container" ng-controller="MainController">

  <h1>Hello Plunker!</h1>

    <div ng-class="$index === 8 ? 'col-md-12' : 'col-md-3'" ng-repeat="item in Data">
      <div class="container-fluid" id="Banner" ng-if="$index === 8">
        <div class="well well-sm text-center">
          Banner
        </div>
      </div>
      <div class="well active" ng-if="$index !== 8">
        <h3>{{item}}</h3>
      </div>
    </div>
  </div>
</div>

Answer 3

如this一个怎么样？

我所做的是让.well绝对定位，这样您就可以“绕过”正常的文档流程，只要您愿意就制作.banner，从而增加额外的宽度和百分比值（所以你可以在调整大小时让它有点流畅）。

.banner{
  position: absolute;
  width: 104%;
  right: -2%;
}

因此，您的横幅更宽，超过100％（这是容器的宽度）。为了使它在中间从右边减去额外宽度的一半（4％/ 2 == 2％）（或者可以从左边减去2％）。

问题在于响应性，因为它会破坏某些断点。我建议使用像SASS和CSS3 calc()，MDN这样的解决方案来解决这个问题。

Answer 4

<div ng-repeat="item in Data">
  <div class="col-md-12 well well-sm text-center" 
       id="Banner" 
       ng-if="$index==8">
    Banner
  </div>
  <div class="col-md-3">
    <div class="well active">
      <h3>{{item}}</h3>
    </div>
  </div>
</div>

使用$ index - Bootsrap容器在ng-repeat中间添加<div>

4 个答案: