引導4阿爾法6 - 標籤複選框，單選按鈕打破整個工具欄造型

Question

在引導4使用<label class="btn btn-secondary"><input type="radio" value="active"> Active</label>中斷整個工具欄 - 阿爾法6

See Bootply

這是視覺的好和壞的代碼

<div class="btn-toolbar" role="toolbar" > 

    <div class="btn-group btn-group-sm" role="group"> 
     <button type="button" class="btn btn-secondary">Select All</button> 
    </div> 
    <div [(ngModel)]="toolbar.active" ngbRadioGroup name="radioBasic" class="btn-group btn-group-sm" (ngModelChange)="onChanges('activeChanged')"> 
     <label class="btn btn-secondary"> 
      <input type="radio" value="active"> Active 
     </label> 
     <label class="btn btn-secondary"> 
      <input type="radio" value="inactive"> Inactive 
     </label> 
     <label class="btn btn-secondary"> 
      <input type="radio" value="all"> All 
     </label> 
    </div> 
    <div class="input-group input-group-sm" style="width: 250px;"> 
     <input id="search" [(ngModel)]="toolbar.search" (ngModelChange)="onChanges($event)" type="text" class="form-control" placeholder="Search for..."> 
    </div> 

    <div class="btn-group btn-group-sm float-xs-right" role="group"> 
     <button type="button" class="btn btn-info" (click)="onChanges('refresh')">Refresh</button> 
     <button type="button" class="btn btn-primary" [routerLink]="['new']">New</button> 
     <button type="button" class="btn btn-secondary">Debug</button> 
    </div> 

</div> 

<br/> 

這改變了代碼打破整個格式化

Answer 1

這似乎是工作得很好..

<div class="btn-toolbar" role="toolbar"> 
    <div class="btn-group btn-group-sm" role="group"> 
     <button type="button" class="btn btn-secondary">Select All</button> 
    </div> 
    <div class="btn-group btn-group-sm" (ngmodelchange)="onChanges('activeChanged')"> 
     <button class="btn btn-secondary"> 
      <input type="radio" value="active"> Active 
     </button> 
     <button class="btn btn-secondary"> 
      <input type="radio" value="inactive"> Inactive 
     </button > 
     <button class="btn btn-secondary"> 
      <input type="radio" value="all"> All 
     </button> 
    </div> 
    <div class="input-group-sm" style="width: 250px;"> 
     <input id="search" [(ngmodel)]="toolbar.search" (ngmodelchange)="onChanges($event)" type="text" class="form-control" placeholder="Search for..."> 
    </div> 
    <div class="btn-group btn-group-sm ml-auto" role="group"> 
     <button type="button" class="btn btn-info" (click)="onRefresh()">Refresh</button> 
     <button type="button" class="btn btn-primary" [routerlink]="['new']">New</button> 
     <button type="button" class="btn btn-secondary">Debug</button> 
    </div> 
</div> 

http://www.codeply.com/go/SkZIflTsOZ

注：我不知道這裏面的按鈕輸入在btn-group中支持。還請注意文檔說..

「隨意混合輸入組與工具欄中的按鈕組。與上面的示例類似，儘管您可能需要一些實用程序來正確分隔事情。