Question

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

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

2）有时禁用第二个和第三个按钮（启用/禁用的逻辑写在敲门模型中，但这里并不重要）

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

＆＃34;禁用元素上的工具提示需要包装元素添加工具提示到禁用或.disabled元素，将元素放在其中 a并将工具提示应用于该工具提示。＆＃34;

4）我根据deocumentation为包装div添加了container：

按钮组和输入组中的工具提示需要特殊设置在.btn-group或。中的元素上使用工具提示时 .input-group，你必须指定选项容器：＆＃39; body＆＃39; （记录如下）以避免不必要的副作用（如元素当工具提示时，变宽和/或失去圆角触发）。

在此之后不幸的是：

a）第三和第二个按钮的顺序改变。

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

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

这是html和JS小提琴链接（http://jsfiddle.net/rRLB4/）：

P.S。请注意，在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/

Answer 2

//test you css code 
.tooltip{
       dislay:none !important;
 }

//if you use tooltip and this code copay paste your source css
 //when use tooltip

 .tooltip{
        position:fixed !important;

    }

 .tooltip-inner {
       padding:5px;
       color:#FFFFFF !important;
       font-size: 12px !important;
       max-width:250px !important;
       text-align:justify !important;
       word-break: break-all;
 }

Bootstrap btn-group with disabled button＆amp; tooltip-wrapper - 与btn顺序和圆角混乱

2 个答案: