Question

我正在使用bootstrap的可折叠功能来获得具有可扩展信息的商店列表。

问题是，当我打开左侧列中的一个可折叠部分时，它会将一些项目推入下一列。如果我打开右侧栏上的折叠，一切都正常滑动，但它也在左侧栏上添加了一个空格。请参阅以下plunker。调整屏幕大小，直到有两行可折叠，然后单击每行中的一行以查看这两种行为：

http://plnkr.co/edit/2SLCQQJetyvM34mrCsHj?p=preview

这是我正在使用的代码：

<div class="panel panel-default store-wrapper">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a data-toggle="collapse" data-target="{{removeSpaces(x.name, true)}}">
        {{x.name}}
      </a>
    </h4>
  </div>
  <div id="{{removeSpaces(x.name, false)}}" class="panel-collapse collapse">
    <div class="panel-body">
      <div class="store-info col-xs-12 col-sm-12 col-md-6 col-lg-6" ng-repeat="item in x.stores">
        <div class="col-xs-6 city">{{item.city}}:</div>
        <div class="col-xs-6 phone">
          <a ng-href="tel:{{item.number}}">{{item.number}}</a>
        </div>
      </div>
    </div>
  </div>
</div>

我想要的结果是让折叠只滑动它所在的列，并且这些项不会移动到下一行。 Bootstrap的网格系统可以实现吗？

Answer 1

尝试为面板使用两个独立的列。像这样：

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="panel panel-default store-wrapper">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-target="#xname-1">
              xname-1
            </a>
          </h4>
        </div>
        <div id="xname-1" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
              <div class="col-xs-6 city">{{item.city}}:</div>
              <div class="col-xs-6 phone">
                <a ng-href="tel:{{item.number}}">{{item.number}}</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel panel-default store-wrapper">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-target="#xname-2">
              xname-2
            </a>
          </h4>
        </div>
        <div id="xname-2" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
              <div class="col-xs-6 city">{{item.city}}:</div>
              <div class="col-xs-6 phone">
                <a ng-href="tel:{{item.number}}">{{item.number}}</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel panel-default store-wrapper">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-target="#xname-3">
              xname-3
            </a>
          </h4>
        </div>
        <div id="xname-3" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
              <div class="col-xs-6 city">{{item.city}}:</div>
              <div class="col-xs-6 phone">
                <a ng-href="tel:{{item.number}}">{{item.number}}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-6">
      <div class="panel panel-default store-wrapper">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-target="#xname-4">
              xname-4
            </a>
          </h4>
        </div>
        <div id="xname-4" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
              <div class="col-xs-6 city">{{item.city}}:</div>
              <div class="col-xs-6 phone">
                <a ng-href="tel:{{item.number}}">{{item.number}}</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel panel-default store-wrapper">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-target="#xname-5">
              xname-5
            </a>
          </h4>
        </div>
        <div id="xname-5" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
              <div class="col-xs-6 city">{{item.city}}:</div>
              <div class="col-xs-6 phone">
                <a ng-href="tel:{{item.number}}">{{item.number}}</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel panel-default store-wrapper">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-target="#xname-6">
              xname-6
            </a>
          </h4>
        </div>
        <div id="xname-6" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
              <div class="col-xs-6 city">{{item.city}}:</div>
              <div class="col-xs-6 phone">
                <a ng-href="tel:{{item.number}}">{{item.number}}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

UPD。我改进了Plinker。现在没有多余的重复。但我必须警告你，我不太了解Angular。

http://plnkr.co/edit/Hj0NF9Vb5ydNIrXLOwPT?p=preview

<body ng-controller="MainCtrl">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6" ng-repeat="column in [0,1]">
        <div class="panel-group col-xs-12 stores-container" ng-repeat="x in storeList" ng-if="$index >= ( $parent.$index * storeList.length / 2 ) && $index < ( ( $parent.$index + 1 ) * storeList.length / 2 )">
          <div class="panel panel-default store-wrapper">
            <div class="panel-heading" data-toggle="collapse" data-target="{{removeSpaces(x.name, true)}}">
              <h4 class="panel-title">
                  <a>
                    {{x.name}}
                  </a>
                </h4>
            </div>
            <div id="{{removeSpaces(x.name, false)}}" class="panel-collapse collapse">
              <div class="panel-body">
                <div class="store-info col-xs-12" ng-repeat="item in x.stores">
                  <div class="col-xs-6 city">{{item.city}}:</div>
                  <div class="col-xs-6 phone">
                    <a ng-href="tel:{{item.number}}">{{item.number}}</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Answer 2

如果你需要它，实际上有一个简单的解决方案。

在每两个<div style="clear:both"></div> div之后添加col-xs-12。并且它将停止将元素推向右边。

您可以看到示例here。

注意：请记住，在每个N个可折叠div之后放置clear div（它应该与列号相同）

Bootstrap可折叠将项目推送到下一列

2 个答案: