【发布时间】：2020-12-27 21:08:12
【问题描述】：
我在此页面上使用 Bootstrap 4 的手风琴，手风琴的最后一项的文本居中。我没有使用text-center，也没有text-align: center 的CSS 属性，所以我不知道是什么原因造成的。所有手风琴的文本都集中在移动端，而不是桌面端。
我的代码：
.accordion-faq .card {
border-radius: 0;
border: 1px solid #F1F5F7;
border-right: none;
border-left: none;
text-align: left;
}
.accordion-faq .card-header {
background-color: white;
border-bottom: none;
}
.accordion-faq .card-header button {
color: #0074e1;
padding-left: 0;
font-size: 0.9em;
}
.accordion-faq .card-header h5 button::after {
content: '\f107';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #0074e1;
position: absolute;
right: 35px;
top: 19px;
}
.accordion-faq .card-header h5 button[aria-expanded="true"]:after {
content: '\f077';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #0074e1;
position: absolute;
right: 35px;
top: 19px;
font-size: 0.8em;
}
.accordion-faq .card-body {
color: #494D53;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 25px;
}
.accordion-faq .card-body a {
color: #0074e1;
}
.faq-no-answer {
font-style: normal;
font-weight: normal;
font-size: 0.9em;
letter-spacing: 0.02em;
color: #494D53;
margin-top: 50px;
}
/* Media Query */
@media (max-width: 992px) {
.accordion-faq,
.accordion-faq .card-header,
.accordion-faq .card-body {
text-align: center !important;
}
.accordion-faq .card-header h5 button::after {
display: none;
}
.accordion-faq .card-header h5 button[aria-expanded="true"]:after {
display: none;
}
}<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Fontawsome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- Faq Vendedores -->
<div class="col-lg-9 col-md-12 col-sm-12 col-12 mx-auto" id="faqVendedores">
<hr class="separator">
<p class="middle-title-thin text-center">Vendedores</p>
<!-- Accordion -->
<div id="accordion" class="accordion-faq">
<div class="card">
<div class="card-header" id="headingQuestionOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseQuestionOne" aria-expanded="false" aria-controls="collapseQuestionOne">
¿Por qué debería agregar company como una opción de pago?
</button>
</h5>
</div>
<div id="collapseQuestionOne" class="collapse" aria-labelledby="headingQuestionOne" data-parent="#accordion">
<div class="card-body">
company es mundialmente reconocida por sus características y facilidad de uso. Nuestra cobertura mundial con múltiples idiomas y tipos de moneda se traducen en un notorio aumento de tu potencial clientela. Nuestro equipo de soporte está listo para ayudarte
a aprovechar, de la mejor manera posible, nuestros servicios.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingQuestionThirtyone">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseQuestionThirtyone" aria-expanded="false" aria-controls="collapseQuestionThirtyone">
¿Puedo insertar botones de pago en múltiples páginas web?
</button>
</h5>
</div>
<div id="collapseQuestionThirtyone" class="collapse" aria-labelledby="headingQuestionThirtyone" data-parent="#accordion">
<div class="card-body">
Sí, puedes hacer esto siempre y cuando las páginas se encuentren en el mismo sitio web. Debido a razones de cumplimiento y/o conformidad, si tienes múltiples sitios web necesitarás solicitar la creación de una nueva cuenta en company para cada website.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingQuestionThirtytwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseQuestionThirtytwo" aria-expanded="false" aria-controls="collapseQuestionThirtytwo">
¿Puedo reemplazar la imagen del botón de pago de company por una propia?
</button>
</h5>
</div>
<div id="collapseQuestionThirtytwo" class="collapse" aria-labelledby="headingQuestionThirtytwo" data-parent="#accordion">
<div class="card-body">
Por supuesto, simplemente reemplaza la URL de la imagen.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingQuestionThirtythree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseQuestionThirtythree" aria-expanded="false" aria-controls="collapseQuestionThirtythree">¿Por qué recibo un mensaje de error cuando trato de acceder a mi archivo IPN desde en navegador?</button>
</h5>
</div>
<div id="collapseQuestionThirtythree" class="collapse" aria-labelledby="headingQuestionThirtythree" data-parent="#accordion">
<div class="card-body">
Algunos archivos IPN «listos para usar» pueden incluir medidas de seguridad para asegurarse de que la notificación de pago realmente proviene de company. En estos casos, al intentar acceder al archivo desde tu navegador se mostrará un mensaje de error.
Si necesitas probar notificaciones, recomendamos utilizar un botón de pago y cambiar tu cuenta a modo Test.
</div>
</div>
</div>
</div>
<!-- /Accordion -->
<p class="text-center faq-no-answer">¿No encontraste tu respuesta? Envíanos un correo a <a href="mailto:helpdesk@company.com">helpdesk@company.com</a></p>
</div>
<!-- /Faq Vendedores -->
<script src="js/popper.min.js"></script>
<script src="js/popper.min.js.map"></script>
<script src="js/jquery.min.js"></script>【问题讨论】：
-
您需要重置按钮的文本对齐默认值。您可以使用
text-leftbuild-in 类。
标签： html css bootstrap-4