首页 文章

Bootstrap btn-group with disabled button＆tooltip-wrapper - 搞乱btn顺序和圆角

提问于
浏览 次
0

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

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

2）有时禁用第二个和第三个按钮（启用/禁用逻辑写入挖掘模型，但这里不重要）

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

“禁用元素上的工具提示需要包装元素要将工具提示添加到禁用或.disabled元素，请将元素放在a中，然后将工具提示应用到该元素 . ”

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

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

不幸的是在此之后：

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

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

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

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

P.S. Please, note that in JS Fiddle I have removed all spaces, enters and tabs in HTML and I do not TidyUp, otherwise there appears some empty spaces and btn-group is not lined up.

<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>
html css twitter-bootstrap

2 回答

  • 0
    //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;
 }
    回复于
  • 2

    您需要将 .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/

    回复于

相关问题