[英]How to collapse the borders in the Bootstrap 4 accordion example?
I'd like to adapt the accordion example from https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example . 我想从https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example改编手风琴示例。 However, I've noticed that the borders in between the collapsible group items are wider than the ones at the top and bottom:
但是,我注意到可折叠组项目之间的边界比顶部和底部的边界宽:
I think it would look nicer if the borders were all the same with, similar to using the borde-collapse
property for tables. 我认为如果边界完全相同会更好看,类似于使用表格的
borde-collapse
属性。 How might I achieve this? 我怎么能实现这个目标?
Here is a snippet: 这是一个片段:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <div id="accordion"> <div class="card"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </button> </h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </button> </h5> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
To get the same border
on each of these tabs, you need to edit the .card
class. 要在每个选项卡上获得相同的
border
,您需要编辑.card
类。 Like this: 像这样:
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #FFF;
border: 0px solid rgba(0,0,0,.125); /*EDIT this part*/
border-radius: 0.25rem;
}
This will make the border
look like this on each: 这将使每个
border
看起来像这样:
Use borde-bottom-0
for the cards to remove just border-bottom
of them. 使用
borde-bottom-0
表示卡片只能去除它们的border-bottom
。
https://codepen.io/anon/pen/PaBpvv https://codepen.io/anon/pen/PaBpvv
Use border-0
for the cards to remove border
top, right, bottom, and left.. To remove radius, use no-radius
. 使用
border-0
表示卡片可以删除border
顶部,右侧,底部和左侧。要删除半径,请使用no-radius
。
https://codepen.io/anon/pen/mKjmJg https://codepen.io/anon/pen/mKjmJg
I noticed that Bootstrap's source code contains the following SCSS: 我注意到Bootstrap的源代码包含以下SCSS:
.accordion {
.card:not(:first-of-type):not(:last-of-type) {
border-bottom: 0;
border-radius: 0;
}
.card:not(:first-of-type) {
.card-header:first-child {
border-radius: 0;
}
}
.card:first-of-type {
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.card:last-of-type {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
So simply adding class="accordion"
makes the 'inner' borders the same width as the 'outer' ones. 因此,简单地添加
class="accordion"
会使“内部”边框与“外部”边框的宽度相同。 This is illustrated in https://jsfiddle.net/8m2g9jsx/1/ . 这在https://jsfiddle.net/8m2g9jsx/1/中有说明。 Strange that Bootstrap does not include the use of this class in its example in the documentation.
奇怪的是,Bootstrap在其文档的示例中不包括此类的使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.