html - Bootstrap/HTML - 使用 Accordion 和 Bootstrap 网格

Question

所以我想知道是否可以使用 Bootstrap 网格(类似 )来尝试并排放置两个 Accordion 。

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

问题:是否可以在 Accordion 上使用 Bootstrap 网格，使两个 Accordion 并排？

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