HTML Accordion 切换图标对齐

Question

我正在创建一个带有切换图标的可扩展列表，我想制作图标 in mobile view每次文本换行时都排在中间，我尝试了很多从搜索中找到的方法，但仍然无法正常工作。

在 Bootstrap 中:

.panel-default {
  border-color: #ddd;
}
.panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #ddd;
}

CSS:

.panel-heading {position: relative;}
.panel-heading [data-toggle="collapse"]:after {font-family:'FontAwesome'; content:"\f056"; float:right; color:#504371; font-size:18px;}
.panel-heading [data-toggle="collapse"].collapsed:after {content: "\f055";}
.panel-title a {display: block; padding: 10px 15px; margin: -10px -15px;}
.panel-title a:focus {text-decoration:none;}
.panel-body h3 {text-decoration:underline;}
.panel-options {position: absolute; right: 15px; top: 10px;}
h1.panel-title {font-size:18px;}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="panel panel-default">
  <div class="panel-heading">
    <li>
      <a class="collapsed" data-toggle="collapse" href="#q1" aria-expanded="false">
        How can I get a coach ticket/invoice after booking a seat online?
      </a>
    </li>
  </div>
  <div id="q1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
    <div class="panel-body">
      <p>After buying online f you do not receive the email, you may login to membership =&gt; view booking history =&gt; select departure date, click invoice to print it out.</span> You are encouraged to print out the order summary to speed up check-in beside showing your ID. Please follow the instruction in the order summary especially about quoting the boarding code to check in into certain coach companies or waiting for the next email in the next working day to obtain an actual Ticket Number to check in into certain coach companies. </p>
    </div>
  </div>
</div>

Answer 1

如果你想把它放在中间，在那个 div 上使用这些类

<div class="col-lg-offset-5 col-md-offset-5 col-xs-offset-5">

这可能会奏效。