Question

我正在使用uib-accordions来显示一些数据。我已将accordion标头定义为一行并将其拆分为各种列以显示各种数据元素。
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图标元素都分成下一行。我试图将这些图标显示在与其标签相同的行中，并且似乎有空的可用空间。

其次，我们如何将手机，地址和各种拨动开关正确对准网格？我尝试了各种选项来使切换开关和保存按钮居中，但它总是打破视图。

以下是代码：

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

function GetSMARTData(Drive:Byte; Feature:Byte; var SMARTData:SMART_DATA):Boolean;
var hDrive: THandle;
    atpexb: ATA_PASS_THROUGH_EX_WITH_BUFFERS;
    bytesRet: DWord;
begin
 //Result:=false;
 hDrive:=CreateFile(PWideChar('\\.\PhysicalDrive'+IntToStr(Drive)), GENERIC_READ or GENERIC_WRITE,
  FILE_SHARE_READ or FILE_SHARE_WRITE, nil, OPEN_EXISTING, 0, 0);
 if hDrive = INVALID_HANDLE_VALUE then RaiseLastOSError;
 try
  bytesRet:=0;
  FillChar(atpexb,SizeOf(atpexb),0);
  atpexb.Length:=SizeOf(ATA_PASS_THROUGH_EX);
  atpexb.AtaFlags:=ATA_FLAGS_DATA_IN;
  atpexb.DataTransferLength:=512;
  atpexb.TimeOutValue:=1;
  atpexb.DataBufferOffset:=SizeOf(ATA_PASS_THROUGH_EX);
  atpexb.CurrentTaskFile.Command:=WIN_SMART;
  atpexb.CurrentTaskFile.Features:=Feature;
  atpexb.CurrentTaskFile.LBA_Mid:=$4F;
  atpexb.CurrentTaskFile.LBA_High:=$C2;

  if not DeviceIoControl(hDrive, IOCTL_ATA_PASS_THROUGH, @atpexb, SizeOf(ATA_PASS_THROUGH_EX),
   @atpexb, SizeOf(atpexb), bytesRet, nil) then RaiseLastOSError;

  Result:=(atpexb.CurrentTaskFile.Command and 1)=0;
  if Result then Move(atpexb.DataBuff, SMARTData, SizeOf(SMART_DATA));

 finally
  CloseHandle(hDrive);
 end;
end;

HTML的种类

.nowrap{
    white-space: nowrap;
}

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

Bootstrap：列空白文本填充

1 个答案: