Bootstrap 拆分按钮未正确呈现-解网

问：

我无法获得 Bootstrap 拆分按钮以正确呈现。它在 Codepen 和 JSFiddle 中运行良好，但在这个测试 Drupal 网站上，下拉部分似乎被推到了按钮下方。我试过弄乱我所知道的所有 CSS，甚至尝试了 ChatGPT 的一些建议。没有任何效果。我想在这一点上我需要一个CSS专家。

你可以在这里看到它：http://lab.oyhd.com/

转到 Menu>Infrastructure>Location Management 查看。

“添加位置”按钮下拉列表应位于按钮的右侧。这是我获取代码的 Bootstrap 示例的链接。您可以看到它们应该如何显示在那里。

https://getbootstrap.com/docs/3.4/components/#btn-dropdowns-split

感谢您的阅读和您可以提供的任何帮助。

这是我使用的实际代码：

enter code here

<div class="split">
<div class="btn-group">
  <button type="button" class="btn btn-warning btn-lg">Add Location</button>
  <button type="button" class="btn btn-warning btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="/node/add/location">Location</a></li>
    <li><a href="/node/add/ct-building">Building (Campus)</a></li>
    <li><a href="/node/add/sublocation">SubLocation</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
</div>

css twitter-bootstrap-3 drupal-7

<div class="split">
<div class="btn-group">
  <button type="button" class="btn btn-warning btn-lg">Add Location</button><br>
  <button type="button" class="btn btn-warning btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><br>
    <span class="caret"></span><br>
    <span class="sr-only">Toggle Dropdown</span><br>
  </button>
<ul class="dropdown-menu">
<li><a href="/node/add/location">Location</a></li>
<li><a href="/node/add/ct-building">Building (Campus)</a></li>
<li><a href="/node/add/sublocation">SubLocation</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>

你的CSS中也存在一个我无法解决的冲突，但是对类的黑客攻击可以解决它（我会添加一个自定义类并在其上应用规则而不是全局）：.btn-lg

.btn-lg {
   padding: 4px 16px;
}

Bootstrap 拆分按钮未正确呈现

Bootstrap split button not rendering correctly

评论

评论