Question

我为一个我正在建设的网站制作了手风琴。最初我用html / css / js构建它。它完美地运作。但是当我将它添加到我的bootstrap框架中时，手风琴中存在巨大的空白。

在添加bootstrap之前，这是我的代码：

＆＃13;

{
  { 
    month: july
    count: 100
  },
  { 
    month: march
    count: 100
  }
}

＆＃13;

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}

＆＃13;

button.accordion {
    background-color: #eee;
    color: black;
    cursor: pointer;
    padding: 18x;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color:#ddd;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}

＆＃13;

这是bootstrap之前的样子：

Before

添加bootstrap之后：

After

任何帮助将不胜感激。谢谢。

Answer 1

您使用与panel和accordion等引导使用相同的类。引导程序还会重置p和h标记的边距和字体。

更改您的班级名称并调整边距以修复它。我已经为您改为_panel和_accordion - 继续调整您的边距。干杯！

＆＃13;

var acc = document.getElementsByClassName("_accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}

＆＃13;

button._accordion {
    background-color: #eee;
    color: black;
    cursor: pointer;
    padding: 18x;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button._accordion.active, button._accordion:hover {
    background-color:#ddd;
}

div._panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div._panel.show {
    opacity: 1;
    max-height: 500px;
}

＆＃13;

<html>
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<h2>Studio Services</h2>

<button class="_accordion"><h6>Studio Recording</h6></button>
<div class="_panel">
  <p>Catering to individual artists or small groups. Great for demos, single songs, or CD albums. Capable of digitally recording, editing and mastering tracks, as well as adding additional orchestration and/or accompaniment if preferred. Final product can be saved as a file, CD, or both.</p>
</div>

<button class="_accordion"><h6>Digital Audio Editing</h6></button>
<div class="_panel">
  <p>Perfect for dance teachers, gymnastic and skating performances! Have a song that you need edited or remixed? Using the latest digital audio editing software, we can edit/remix your song that you provide on CD or digital format. We can also combine pieces of songs to form the perfect background track for your dance, gymnastic and skating routines.
Check out these three examples of smooth segues:
Segue1.mp3     Segue2.mp3     segue3.mp3</p>
</div>

<button class="_accordion"><h6>Jingles</h6></button>
<div class="_panel">
  <p>Let us compose and record the perfect jingle, tailor made for YOUR business! 
15, 30 and 60-second jingles to help bring in customers.</p>
</div>

<button class="_accordion"><h6>Arranging, Transcription and Orchestration</h6></button>
<div class="_panel">
  <p>Ken has over 35 years experience in arranging choral music, from show choirs to church choirs, with the capability of adding orchestral charts and accompaniment as needed. He can also transcribe songs (making charts and accompaniment from a recorded piece.)</p>
</div>

<button class="_accordion"><h6>Music Clean-up and Manuscripts</h6></button>
<div class="_panel">
  <p>Got a piece of hand-written music? We can transfer that to easy-to-read professional-quality manuscript.
Here’s an example of a before and after:  Swingtime before and after.pdf</p>
</div>

<button class="_accordion"><h6>Background Tracks</h6></button>
<div class="_panel">
  <p>Perfect for individualizing your own vocal performance, whether it be an inspirational church song or a memorable karaoke background track.</p>
</div>

<button class="_accordion"><h6>Audition Accompaniment Tracks</h6></button>
<div class="_panel">
  <p>Great for mailed-in or digital audition CD’s. Let us work with you to give you the perfect accompaniment for that crucial vocal/instrumental audition. Don’t let your audition be ruined by a bad accompanist!</p>
</div>

<button class="_accordion"><h6>Additional Digital Editing Capabilities</h6></button>
<div class="_panel">
  <p>Pitch adjustment, real time clip stretching, and countless editable digital effects</p>
</div>
</body>
</html>

＆＃13;

如何解决我的Bootstrap手风琴问题？

1 个答案: