Question

我试图在bootstrap中创建一个包含双按钮组列表的页面。主按钮将触发我稍后要写的事件，但目标是让按钮组右侧的按钮（看起来像下拉按钮）触发按钮下的手风琴。

我或多或少地处理了以下问题： 1）由于某种原因，按钮组的左侧有圆角，右侧有锋利的边缘。没什么大不了的，但很烦人。

2）触发手风琴打开时有一些奇怪的视觉效果。一瞬间，它似乎无限扩展，盒子右侧有奇怪的线条。然后一切都恢复到它应该看的样子。

3）当折叠开放式手风琴时，div只会消失而不是平滑地向后滚动。

4）第二个按钮下方有一条奇怪的线，我认为它与手风琴面板有关，但我不确定。

任何帮助或提示将不胜感激。谢谢！

HTML：

<div align="center">
  <div class="accordion" id="myAccordion">
    <div class="panel">
      <div class="btn-group btn-block btn-group-lg">
        <button type="button" class="btn btn-default btn-main-title">
          Button 1
        </button>
      <button type="button" class="btn btn-default btn-main-dropdown" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <div id="collapsible-1" class="collapse">
        <div style="background-color:#dff0d8;">Nulla vel imperdiet elit. Nullam et diam nulla. Duis nunc orci, gravida vel pellentesque ac, bibendum vitae enim. Aliquam ullamcorper rutrum est, nec luctus eros posuere in. Suspendisse molestie enim eget ante facilisis vehicula. Duis quis consectetur massa. Aliquam sit amet turpis eget metus rutrum pellentesque id eget eros. Aliquam et eros non justo porttitor scelerisque ut ut neque. Ut ultricies mauris sit amet enim iaculis, sed varius nisl varius. Nunc sed urna non enim lobortis sodales sed nec nisl. Duis commodo luctus massa eu interdum. Fusce laoreet ac massa eget sollicitudin. Duis in ligula commodo lectus dictum laoreet vel ac quam.</div>
      </div>
    </div>      

    <div class="btn-group btn-block btn-group-lg">
      <button type="button" class="btn btn-default btn-main-title">
        Button 2
      </button>
      <button type="button" class="btn btn-default btn-main-dropdown" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <div id="collapsible-2" class="collapse">
        <div style="background-color:#dff0d8;">Nulla vel imperdiet elit. Nullam et diam nulla. Duis nunc orci, gravida vel pellentesque ac, bibendum vitae enim. Aliquam ullamcorper rutrum est, nec luctus eros posuere in. Suspendisse molestie enim eget ante facilisis vehicula. Duis quis consectetur massa. Aliquam sit amet turpis eget metus rutrum pellentesque id eget eros. Aliquam et eros non justo porttitor scelerisque ut ut neque. Ut ultricies mauris sit amet enim iaculis, sed varius nisl varius. Nunc sed urna non enim lobortis sodales sed nec nisl. Duis commodo luctus massa eu interdum. Fusce laoreet ac massa eget sollicitudin. Duis in ligula commodo lectus dictum laoreet vel ac quam.</div>
      </div>
    </div>
  </div>
</div>

CSS：

.btn-main-title {
  width: 75%;
  text-align: left;
}

.btn-main-dropdown {
  width: 15%;
}

Bootply：http://bootply.com/104455

Answer 1

将<div id="collapsible-1" class="collapse">移到<div class="btn-group btn-block btn-group-lg">

之外

collapse内部的btn-group似乎导致了您的问题......

http://bootply.com/104468

<div class="accordion" id="myAccordion">
    <div class="panel">
        <div class="btn-group btn-block btn-group-lg">
           <button>...</button>
           <button>...</button>
        </div>      

        <div id="collapsible-1" class="collapse">
           <div>Content...</div>
        </div>
        ...
    </div>
</div>

然后我接受了你的想法，并以略有不同的方式重新创建它，仅仅是为了玩弄。

My version

让Bootstrap 3按钮组正确触发手风琴的问题

1 个答案: