table 手风琴布局调整

Question

我正在尝试在 table 布局中显示手风琴。但是，扩大阵型后，阵型开始紊乱

我在这里尝试检查手风琴 here 的 table 布局。

<div ng-controller="AccordionDemoCtrl">
<label class="checkbox">
    <input type="checkbox" ng-model="oneAtATime" />Open only one at a time</label>
<accordion close-others="oneAtATime">
    <accordion-group  heading="Static Header">This content is straight in the template.</accordion-group>
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</accordion-group>
    <accordion-group heading="Dynamic Body Content">
        <p>The body of the accordion group grows to fit the contents</p>
        <button class="btn btn-small" ng-click="addItem()">Add Item</button>
        <div ng-repeat="item in items">{{item}}</div>
    </accordion-group>
</accordion>

点击第一个手风琴时，它会展开，但也会干扰底部的手风琴。给我的模型是：

Answer 1

我发现你用的是 css for panel like

.panel{
  width:30%;
  float:left;
}

请尝试更改 css 面板，如下所示

.panel{
  width:100%;
  float:left;
}

我会工作的。

Answer 2

手风琴来自 angular-ui-botstrap 所以 bootstrap 风格 应该包括（并且已经包括），所以您的解决方案是使用 bootstrap grid（使用行 class 和列 class）

对于这个例子，我使用 col-xs-4 只是为了强制显示 fiddle.

中的所有 3 列

   <accordion close-others="oneAtATime">
       <div class="row">

         <div class="col-xs-4">
            <accordion-group heading="Static Header">This content is straight in the template.</accordion-group>
            <accordion-group heading="Static Header">This content is straight in the template.</accordion-group>
            <accordion-group heading="Static Header">This content is straight in the template.</accordion-group>
         </div>  

         <div class="col-xs-4">
            <accordion-group heading="Static Header">This content is straight in the template.</accordion-group>
            <accordion-group  heading="Static Header">This content is straight in the template.</accordion-group>
            <accordion-group heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</accordion-group>
        </div>

         <div class="col-xs-4">
              <accordion-group heading="Dynamic Body Content">
                <p>The body of the accordion group grows to fit the contents</p>
                <button class="btn btn-small" ng-click="addItem()">Add Item</button>
                <div ng-repeat="item in items">{{item}}</div>
              </accordion-group>
              <accordion-group  heading="Static Header">This content is straight in the template.</accordion-group>
              <accordion-group  heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</accordion-group>
        </div>

    </div>

http://jsfiddle.net/y03r5as2/1/

并删除 css 样式，您不需要那个。

注意：您可以按照 bootstrap grid 文档通过添加 col-sm- & 来根据您的需要进行调整col-md- 和 col-lg- 也一样，每个大屏幕都有不同的外观。或者只有 col-xs-，如果你想为所有屏幕强制设置 3 列...

更新：从动态数据构建手风琴

从动态数据，它是一个数组，如：[item1, item2, ...]，最好的方法是在控制器中转换此数据。您只需将此数组划分为数组内的 3 个新数组，例如： [[item1,item2,...], [item6,...], [item9, ...]]

这是一个简单的函数，可以分割您的数据：

   function separateArray(arr, size) {
      var newArr = [];
      var colsLength = Math.ceil(arr.length/size);
      for (var i=0; i<arr.length; i+=colsLength) {
        newArr.push(arr.slice(i, i+colsLength));
      }
      return newArr;
    }

并像这样使用它：

$scope.transformedGroups = separateArray($scope.groups, 3);

它将您的数据分成 3 个数组：[[item1,item2,...], [item6,...], [item9, ...]]

现在您可以轻松拥有 3 列：

<div class="row">
    <accordion close-others="oneAtATime">
         <div class="col-xs-4" ng-repeat="rows in transformedGroups">
           <accordion-group heading="{{group.title}}"  ng-repeat="group in rows">{{group.content}}</accordion-group>
         </div>
   </accordion>
</div>

工作fiddle：http://jsfiddle.net/mrev7gL7/1/

Answer 3

对这个特定的布局使用 bootstrap 可能是一个很好的解决方案。为您提供没有 table 标记的 table 布局，并允许您的数据堆叠在较小的屏幕尺寸上，从而消除可怕的水平滚动的可能性。

正如我在上面的评论中所说，您肯定希望确保您的数据以 xs 屏幕尺寸 (<=767px) 堆叠：

<div class="col-lg-4 col-md-4 col-sm-4 col-xs">

但是，如果您需要按列而不是按行堆叠数据，则需要将数据包装成一行并在列中嵌套各个行。 See my fiddle here.

UPDATE-9/20/17:10:30EST

我是个笨蛋！我不敢相信我一开始就不推荐这个！我相信 flex-container and flex-items is the best solution to achieve your specs. I've started a NEW FIDDLE 这应该是一个好的开始。

table 手风琴布局调整

table layout adjustment for accordian

html

css

angularjs

angular-ui-bootstrap

更新：从动态数据构建手风琴