【发布时间】：2017-11-23 11:44:52
【问题描述】：
我正在使用 uib-accordions 来显示一些数据。我将手风琴标题定义为一行并将其拆分为不同的列以显示各种数据元素。
Accordion View in Small and larger screens |
Accodion View in XS scren
列分布：
商店 ID (col-xs-12 col-sm-5)
控件 (col-xs-12 col-sm-5)：[SFS (Col-xs-4)、BOPIS(col-xs-4)、BOSTS(col-xs-4)]
箭头图标 (col-xs-2 col-sm-1)
现在在小视图中，所有字形图标元素都拆分到下一行。我正在尝试将这些图标显示在与其标签相同的行中，并且似乎有可用空间。
其次，我们如何将电话，地址和各种拨动开关正确对齐到网格中？我尝试了各种选项来使切换开关和保存按钮居中，但它总是会破坏视图。
代码如下：
<div class="container">
<div class="col-xs-12">
<hr>
<h4> Search: </h4>
<hr>
</div>
<div class="mycontainer row row-content" ng-controller="MainController" style="padding-top:100px" ng-cloak>
<uib-accordion close-others="true" ng-controller="ItemController" >
<div uib-accordion-group is-open="isopen" ng-repeat="item in items">
<uib-accordion-heading>
<div class="row" style="padding-top:3px">
<div class="col-xs-12 col-sm-5 ">
Store ID #: {{item.storeid}} | {{item.desc}}
</div>
<div class="col-xs-10 col-sm-6">
<div class="row">
**<div class="col-xs-4">SFS <span ng-if="item.SFS" class="glyphicon glyphicon-ok-circle"></span><span ng-if="!item.SFS" class="glyphicon glyphicon-remove-circle"></span> </div>
<div class="col-xs-4">BOPIS <span ng-if="item.BOPIS" class="glyphicon glyphicon-ok-circle"></span><span ng-if="!item.BOPIS" class="glyphicon glyphicon-remove-circle"></span></div>
<div class="col-xs-4">BOSTS <span ng-if="item.BOSTS" class="glyphicon glyphicon-ok-circle"></span><span ng-if="!item.BOSTS" class="glyphicon glyphicon-remove-circle"></span></div>
</div>**
</div>
<div class="col-xs-2 col-sm-1 ">
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
</div>
</div>
</uib-accordion-heading>
<div class="row">
<div class="col-xs-12 col-sm-4">
<a ng-href="tel:{{item.phone}}">
<span class="glyphicon glyphicon-earphone "></span> Phone: {{item.phone}}<br>
</a>
<a href="#">
<span class="glyphicon glyphicon-map-marker"></span> Address: {{item.address}}<br>
</a>
</div>
<div class="col-xs-12 col-sm-8 ">
<div class="col-xs-12 col-sm-4">
SFS:
<toggle ng-model="item.SFS" aria-label="SFS Switch"></toggle>
</div>
<div class="col-xs-12 col-sm-4">
BOPIS:
<toggle ng-model="item.BOPIS" aria-label="SFS Switch"></toggle>
</div>
<div class="col-xs-12 col-sm-4">
BOSTS:
<toggle ng-model="item.BOSTS" aria-label="SFS Switch"></toggle>
</div>
</div>
<div class="col-xs-12">
<button class="btn btn-primary .btn-sm">Save</button>
</div>
</div>
</div>
</uib-accordion>
</div>
</div>
【问题讨论】：
标签： html twitter-bootstrap angular-bootstrap