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

这可能会奏效。

Answer 2

更容易使用flex。删除：after for .panel-heading并使用..添加图标

它会完美无缺

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>

以下是Codepen： https://codepen.io/zpokoin/pen/xWaMdQ

HTML手风琴切换图标对齐

2 个答案: