html - Bootstrap btn-group with disabled button & tooltip-wrapper - 困惑 btn 顺序和圆 Angular

Question

我无法在 boostrap 按钮组中排列三个按钮。

1) 我里面有 btn-group 和三个按钮

2)第二个和第三个按钮有时会被禁用(启用/禁用的逻辑写在敲除模型中，但这里并不重要)

3) 第二个按钮有工具提示，所以我为按钮创建了 tooltip-wrapper，因为禁用的按钮不能有工具提示(来自 Bootstrap 文档 http://getbootstrap.com/javascript/:

"Tooltips on disabled elements require wrapper elements To add a tooltip to a disabled or .disabled element, put the element inside of a and apply the tooltip to that instead."

4) 我已经按照文档说明为包装器 div 添加了 container:

Tooltips in button groups and input groups require special setting When using tooltips on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).

不幸的是:

a) 第三个和第二个按钮的顺序发生变化。

b) 三个按钮看起来不像btn-group

我无法找到解决方案或想法尝试什么。更改按钮顺序没有帮助。

这是 html 和 JS fiddle 链接(http://jsfiddle.net/rRLB4/):

附言请注意，在 JS Fiddle 中，我已经删除了 HTML 中的所有空格、输入和制表符，并且我没有 TidyUp，否则会出现一些空格并且 btn-group 没有排列。

<div class="btn-group">
    <button data-toggle="modal" data-target="#portfolioEditModal" data-bind="click: triggerFileUpload, clickBubble: false" class="btn btn-primary">Import</button>
    <div class="tooltip-wrapper" data-toggle="tooltip" data-container="body" data-placement="bottom" data-original-title="Enter data!">
        <button data-bind="click: trySave, clickBubble: false" class="btn btn-primary" disabled="">Save</button>
    </div>
    <button class="btn btn-primary" data-bind="click: showSaveAsDialog, clickBubble: false" disabled="">Save As</button>
</div>

Answer 1

您需要将 .tooltip-wrapper 设置为向左浮动，就像按钮组中的按钮一样，并调整包装内按钮的边框半径。这样的事情应该有效:

.tooltip-wrapper {
    display: inline-block;
    float: left;
}

.tooltip-wrapper .btn {
    border-radius: 0;
}

.tooltip-wrapper:first-child .btn {
    border-radius: 3px 0 0 3px;
}

.tooltip-wrapper:last-child .btn {
    border-radius: 0 3px 3px 0;
}

这是您更新的示例:http://jsfiddle.net/sxqDt/12/