Question

我基本上有一个按钮组，其中一个按钮有时被禁用（“Corpus delicti”）。如果它被禁用，我想通过一个popover向用户显示一个解释。

由于禁用的元素需要包装元素，因此我在按钮周围包裹了一个div - 这使得样式变得混乱。

所以我按照Bootstrap的提示“指定选项容器：'body'”但造型仍然搞砸了。

这是标记，也在这个小提琴中找到它： https://jsfiddle.net/7ben7zmg/

<div class="btn-group" role="group">
  <button onclick="console.log('huh')" type="button" class="btn btn-default">Log-Datei</button>
  <div class="btn-group" role="group">
    <div data-container="body" data-toggle="popover" data-placement="right" data-content="Lorem ipsum..." data-trigger="hover" data-html="true">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled=""></button>
    </div>
    Corpus delicti <span class="caret"></span>
    <ul class="dropdown-menu">
      <li><a href="../../createStuff/1/123/de" target="_blank">deutsch</a></li>
      <li><a href="../../createStuff/1/123/en" target="_blank">englisch</a></li>
    </ul>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Infoseite <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">deutsch</a></li>
      <li><a href="#">englisch</a></li>
    </ul>
  </div>
  <button type="button" class="btn btn-default">TCP-Dump</button><button type="button" class="btn btn-default">Diesen Kunden deaktivieren</button>
</div>

不知道我能做什么。请帮忙。

Answer 1

在data-toggle:popover中应用btn-group，而不是在其他div中包装..

包装到另一个div会打扰你的布局..

<强> Updated Fiddle

如何使用Bootstrap popover插件使用容器参数

1 个答案: