Question

我试图在表格布局中显示手风琴。但是，在扩大他们的阵型后会受到干扰。

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

<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

手风琴来自angular-ui-botstrap所以引导风格应该包括在内（并已包含在内），所以您的解决方案是使用bootstrap grid（使用行类和col类）

对于此示例，我仅使用 col-xs-4 强制显示小提琴中的所有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- ＆amp; col-md - 和 col-lg- 也可以为每个大屏幕提供不同的外观。或者只有col-xs - ，如果你想为所有scren强制使用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个col：

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

工作小提琴：http://jsfiddle.net/mrev7gL7/1/

Answer 2

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

正如我在上面的评论中所说，你肯定希望确保数据堆栈的xs屏幕尺寸（＆lt; = 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是实现您的规格的最佳解决方案。我已经开始NEW FIDDLE这应该是一个好的开始。

Answer 3

我发现你使用css作为面板

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

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

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

我会工作。

手风琴的桌子布局调整

3 个答案:

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