Bootstrap：列空白文本填充

Question

我正在使用uib-accordions來顯示一些數據。我已將手風琴標題定義爲一行，並將其分割成各個列以顯示各種數據元素。
Accordion View in Small and larger screens | Accodion View in XS scren
柱分佈：
商店編號（COL-XS-12 COL-SM-5）
控制（COL-XS-12 COL-SM-5）：[SFS（西-XS-4），BOPIS （COL-XS-4），BOSTS（COL-XS-4）]
箭頭圖標（COL-XS-2 COL-SM-1）

現在，在小視圖中的所有glyphicon圖標元件分成下行。我試圖將這些圖標顯示在與其標籤相同的行中，並且似乎有可用的空白空間。其次，我們如何將電話，地址和各種切換開關正確對齊到網格中？我已經嘗試了各種選項來居中切換開關和保存按鈕，但它總是打破了視圖。

下面是代碼：

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