Bootstrap/HTML -使用折叠和Bootstrap网格

zour9fqk  于 2023-05-27  发布在  Bootstrap
关注(0)|答案(1)|浏览(157)

所以我想知道是否有可能使用引导网格(类似于)来尝试并排放置两个 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">

在button类的上面,很明显,还关闭了div元素,但这不起作用。我不知道我该怎么办。

**问题:**是否可以在 accordion 上使用引导网格,使两个 accordion 并排?.

我已经检查了相应的API,我找不到类似的问题。

rqdpfwrv

rqdpfwrv1#

在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/

相关问题