ブートストラップ：列の空白テキストの入力

Question

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）

今小さなビュー内のすべてのglyphiconアイコン要素は次に分割行。私はこれらのアイコンをラベルと同じ行に表示しようとしていますが、空きスペースがあるようです。

第2に、電話機、住所、各種のトグルスイッチをグリッドに適切に合わせるにはどうすればよいですか？私はトグルスイッチを中心にしてボタンを保存するための様々なオプションを試しましたが、常にビューが壊れています。ここで

コードです：

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