Question

我想是一种新手问题，但不过：

我正在实现一个Bootstrap拆分按钮，从他们的例子开始：

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

在我的代码中，下拉链接工作正常;我的问题是如何将动作分配给按钮的主要部分 - 由“动作”文本组成的部分。我正在使用“我在下拉菜单链接”部分中使用的<a>标记替换“操作”。除了一些css可以轻松处理的颜色和文本装饰样式外，这种方法很好。我只是想确保这是正确的方法，因为它没有在Bootstrap doc站点中明确涵盖（至少我已经发现）。

无论如何：这是对的吗？

Answer 1

我会做这样的事情（我认为这就是你所描述的）：

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    <a href="someaction">Action</a>
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

如果没有JavaScript，它不会好得多。

Answer 2

搜索同样的问题，我找到了你（和我）需要的东西。正如this solution所述，您可以使用链接并将其设置为按钮，而不是按钮。它将以您想要的方式工作，链接将是完整按钮，而不仅仅是链接的文本。

<div class="btn-group">
  <a href="#" class="btn">Action</a>

  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>

  <ul class="dropdown-menu">
    <li>Test</li>
    <li>Test 2</li>
  </ul>
</div>

如何将动作放入Bootstrap分割按钮的主按钮区域？

2 个答案: