HTML 手风琴切换图标对齐

Question

我正在创建一个带有切换图标的可扩展列表，我想在每次文本换行时使移动视图中的图标在中心排队，我已经尝试了很多从我的搜索中找到的方法，但仍然不起作用。

在引导程序中：

.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">

这可能会起作用。

Answer 2

它更容易使用flex。删除 .panel 标题的 ：after 并使用 .. 添加图标。

它会很好地工作

.CSS

.panel-heading li a{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-heading li a i{
  margin-left: 10px;
}

.HTML

    <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?
              <i class="fa fa-plus"></i>
            </a>   
        </li>
      </div>

这是代码笔：https://codepen.io/zpokoin/pen/xWaMdQ