Bootstrap: 白色列 Space 文本填充

Question

我正在使用 uib-accordions 来显示一些数据。我已经将 accordion header 定义为一行并将其拆分为不同的列以显示不同的数据元素。
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)

现在在小视图中，所有字形图标元素都拆分到下一行。我正在尝试将这些图标显示在与其标签相同的行中，但似乎没有可用的 space。

其次，我们如何将phone、地址和各种拨动开关正确对齐到一个网格中？我已经尝试了各种选项来使切换开关和保存按钮居中，但它总是会破坏视图。

代码如下：

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

Answer 1

Bootply: https://www.bootply.com/rFa5pgA0rv

CSS:

.nowrap{
    white-space: nowrap;
}

@media screen and (max-width:768px) {
  .pull-right-xs{float:right;}
}

那种HTML

<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 nowrap">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 nowrap">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 nowrap">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-6 col-sm-8 ">
                        <div class="col-xs-12 col-sm-4">
                            SFS: 
                            <toggle class="pull-right-xs" ng-model="item.SFS" aria-label="SFS Switch">toggle</toggle>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                            BOPIS: 
                            <toggle class="pull-right-xs" ng-model="item.BOPIS" aria-label="SFS Switch">toggle</toggle>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                            BOSTS: 
                            <toggle class="pull-right-xs" ng-model="item.BOSTS" aria-label="SFS Switch">toggle</toggle>
                        </div>
                    </div>
                    <div class="col-xs-12"> 
                        <button class="btn btn-primary .btn-sm">Save</button>
                    </div>
                </div>
            </div>
        </uib-accordion>
    </div>
</div>

Bootstrap: 白色列 Space 文本填充

Bootstrap: Column White Space Text Fill

html

twitter-bootstrap

angular-bootstrap