Question

所以我想知道是否可以使用自举网格（类似的东西）尝试并排两个手风琴。

这是我一直在使用的代码，取自w3schools并进行了一些修改。我刚刚收录了相关章节，但如果需要更多信息，请说明。

img {
  max-width: 100%;
  max-height: 100%;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.solid {
  border-style: solid;
}

.gainsboro-background {
  background-color: gainsboro;
}

.white-box {
  background-color: white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

<button class="accordion"><b> Example 1 </b></button>
<div class="panel">
  <p> Example 1 </p>
  <p> Example 1 </p>
  <p> Example 1 </p>
</div>
<button class="accordion"><b> Example 2 </b></button>
<div class="panel">
  <p> Example 2 </p>
  <p> Example 2 </p>
  <p> Example 2 </p>
</div>

我以为我可以添加

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">

在按钮类之上，显然关闭div元素，但这不起作用。我不太清楚我应该在这做什么。

问题：是否可以在手风琴上使用自举网格，并列两个并排手风琴？。

我检查了相应的API，但找不到类似的问题。

Answer 1

在bootstrap中尝试这个

<style>
img {
max-width: 100%;
max-height: 100%;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc; 
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
.solid {border-style: solid;
}
.gainsboro-background { background-color:gainsboro; 
}
 .white-box {
background-color: white;
    }
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-6">
<button class="accordion"  data-toggle="collapse" data-target="#example_1"><b> Example 1 </b></button>
<div class="panel collapse" id="example_1">
<p> Example 1 </p>
<p> Example 1 </p>
<p> Example 1 </p>
</div>
</div>
<div class="col-sm-6">
<button class="accordion" data-toggle="collapse" data-target="#example_2"><b> Example 2 </b></button>
<div class="panel collapse" id="example_2">
<p> Example 2 </p>
<p> Example 2 </p>
<p> Example 2 </p>
</div>
</div>
</div>
</div>

和演示链接https://jsfiddle.net/kingtaherkings/cxbxs8vj/

Bootstrap / HTML - 使用Accordion和Bootstrap网格

1 个答案: