Question

使用<label class="btn btn-secondary"><input type="radio" value="active"> Active</label>打破Bootstrap 4 - Alpha 6

中的整个工具栏

这是好的和坏的代码的视觉

<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中按钮内的输入是否被支持。另请注意文档说..

“随意将输入组与工具栏中的按钮组混合。与上面的示例类似，您可能需要一些实用程序才能正确分配内容。”

Bootstrap 4 Alpha 6 - 标签复选框单选按钮打破整个工具栏样式

1 个答案: