Question

我正在使用bootstrap来使用可折叠文本我使用两个按钮进行折叠以及相应的可折叠文本问题是文本出现在按钮的末尾而不是出现在各自的按钮之后。

这是我在点击按钮时尝试做的事情（文本显示在其按钮下方）：

------------  
| Button-1 |  
------------  
Text for Button-1  

------------  
| Button-2 |  
------------  
Text for Button-2

但这是我得到的：

------------  
| Button-1 |  
------------  
------------  
| Button-2 |  
------------  
Text for Button-1

这是我写的代码：

<h2>Simple Collapsible</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#text1">Button-1</button><br/>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#text2">Button-2</button>
  <div id="text1" class="collapse">
   This text should appear under Button-1
  </div>
  <div id="text2" class="collapse">
   Text to appear under Button-2
  </div>

任何帮助都将受到高度赞赏！

Answer 1

只需移动div即可解决您的问题

<h2>Simple Collapsible</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#text1">Button-1</button>
<div id="text1" class="collapse">
    This text should appear under Button-1
</div>
<br/>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#text2">Button-2</button>
<div id="text2" class="collapse">
    Text to appear under Button-2
</div>

Answer 2

将所需文字放在所需按钮下方。这就是我的所作所为。

＆＃13;

<h2>Simple Collapsible</h2>

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#text1">Button-1</button>
<br/>
<div id="text1" class="collapse">
  This text should appear under Button-1
</div>

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#text2">Button-2</button>

<div id="text2" class="collapse">
  Text to appear under Button-2
</div>

＆＃13;

Answer 3

<h2>Simple Collapsible</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#text1">Button-1</button><br/>
<div id="text1" class="collapse">
   This text should appear under Button-1
  </div>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#text2">Button-2</button>
  <div id="text2" class="collapse">
   Text to appear under Button-2
  </div>

HTML-Bootstrap：如何使可折叠文本显示在其自己的按钮下

3 个答案: