Bootstrap/HTML - 使用手风琴和 Bootstrap 网格

Question

所以我想知道是否可以使用 bootstrap 网格（类似于）来尝试并排放置两个手风琴。

这是我一直在使用的代码，取自 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 元素，但这不起作用。我不太确定我应该在这里做什么。

问题：是否可以在手风琴上使用 bootstrap 网格，有两个并排的手风琴？

我已经检查了相应的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>

和演示 link https://jsfiddle.net/kingtaherkings/cxbxs8vj/

Bootstrap/HTML - 使用手风琴和 Bootstrap 网格

Bootstrap/HTML - Using an Accordion and Bootstrap Grid

html

css

twitter-bootstrap

bootstrap-grid