ブートストラップ3の取得3ボタングループを適切にトリガーする

Question

ブートストラップにページを作成しようとしていると、2つのボタングループのリストがあります。プライマリボタンは後で書き込むイベントをトリガーしますが、ボタングループの右側にあるボタン（ドロップダウンボタンのように見えます）のボタンを押してボタンの下のアコーディオンを開始することです。

私は以下の問題を抱えてそれを多かれ少なかれ働いています。 1）何らかの理由で、ボタングループの左側に丸みを帯びた角があり、右側には鋭い縁があります。大したことではなく、いらいらしています。

2）アコーディオンを開くと、いくつかの奇妙な視覚効果があります。分割秒の場合、箱の右側にある奇妙な線で、無期限に拡大するようです。それからすべてが見えるようになる方法に戻ります。

3）オープンアコーディオンを崩壊させるとき、DIVは、バックアップを円滑にスクロールするのではなく、単に消えます。

4）2番目のボタンの下に奇妙な線があります。私はアコーディオンパネルと関係があるが私はよくわからない2番目のボタンの下にあります。

あらゆる助けやヒントが理解されます。ありがとう！

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：

Answer 1

<div id="collapsible-1" class="collapse">

の外側に移動する

<div class="btn-group btn-block btn-group-lg">は、問題を引き起こしているようです...

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>

.

それから私はあなたの考えを撮り、ファンザイズのためだけにそれを少し異なって再現しました。

マイバージョン