html - 如何在 Bootstrap 面板中拆分“标题”和“图标”？

Question

我正在我的网站上添加一个常见问题解答部分（尚未上线，因此没有链接）。我有一些我无法解决的小 CSS 问题。我有一个看起来像这样的面板：

问题#1：
- 没有将图标和文本分开（见图）。标题可长可短。
- 标题较长且有多行（行）时，图标不居中，图标只是向下。（见图）

我如何将标题分为 2 部分，其中 1 部分以高度和宽度（图标）为中心。谢谢

.btn,
    .btn:hover,
    .btn:focus,
    .btn:active,
    .btn:active:focus {
        outline: 0;
    }

    .btn-custom {
        margin-bottom: 1em;
    }

    .no-margin {
        margin: 0;
    }

    .no-padding {
        padding: 0;
    }

    .no-border {
        border: 0;
    }

    .no-radius {
        border-radius: 0;
    }


    /*** Content ***/
    main {}

    .i-row {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .i-row-odd {
        background-color: #ffffff;
    }

    .i-row-even {
        background-color: #f7f7f7;
    }

    .section-title {
        margin-top: 0;
        margin-bottom: 0.6em;
        font-weight: 500;
    }

    .section-title .fa {
        margin-right: 5px;
        color: #6f5499;
    }


    .i-accordion .panel-heading,
    .d-accordion .panel-heading,
    .accordion-2a .panel-heading,
    .accordion-2b .panel-heading,
    .accordion-3 .panel-heading {
        cursor: pointer;
    }

    .d-accordion .panel-heading.collapsed .fa-chevron-up:before {
        content: '\f078';
    }


    .panel-success>.panel-heading {
        background-color: transparent;
        border-color: transparent;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
    crossorigin="anonymous">
<div class="col-md-6">
    <div class="panel-group i-accordion">
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#aboutus3">
                <h4 class="panel-title">test<i class="fa fa-chevron-right pull-left"></i></h4>
            </div>
            <div id="aboutus3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#whoweare3">
                <h4 class="panel-title">testtesttesttesttesttest<i class="fa fa-chevron-right pull-left"></i></h4>
            </div>
            <div id="whoweare3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#contactus3">
                <h4 class="panel-title">testtesttesttesttesttesttesttesttestesttes ttesttestt<i class="fa fa-chevron-right pull-left"></i></h4>
            </div>
            <div id="contactus3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#cold">
                <h4 class="panel-title">test<i class="fa fa-chevron-right pull-left"></i></h4>
            </div>
            <div id="cold" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
    </div>
</div>

更新答案：

问题现已修复，但仍存在一些小问题：
- 标题和图标现已分开，但我需要为图标留出更多空间。
- 图标仍然下降一些像素，标题超过 1 行/行。

谢谢！

标签： htmlcssbootstrap-4accordionpanel

Answer 1

我的解决方案使用flex，移动你icon之前的文本并设置

.panel-title{
    display: flex;
    align-items: center
}

    .panel-title {
        display: flex;
        align-items: center
    }

    .panel-title > i {
        margin-right: 10px;
    }

    .btn,
    .btn:hover,
    .btn:focus,
    .btn:active,
    .btn:active:focus {
        outline: 0;
    }

    .btn-custom {
        margin-bottom: 1em;
    }

    .no-margin {
        margin: 0;
    }

    .no-padding {
        padding: 0;
    }

    .no-border {
        border: 0;
    }

    .no-radius {
        border-radius: 0;
    }


    /*** Content ***/
    main {}

    .i-row {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .i-row-odd {
        background-color: #ffffff;
    }

    .i-row-even {
        background-color: #f7f7f7;
    }

    .section-title {
        margin-top: 0;
        margin-bottom: 0.6em;
        font-weight: 500;
    }

    .section-title .fa {
        margin-right: 5px;
        color: #6f5499;
    }


    .i-accordion .panel-heading,
    .d-accordion .panel-heading,
    .accordion-2a .panel-heading,
    .accordion-2b .panel-heading,
    .accordion-3 .panel-heading {
        cursor: pointer;
    }

    .d-accordion .panel-heading.collapsed .fa-chevron-up:before {
        content: '\f078';
    }


    .panel-success>.panel-heading {
        background-color: transparent;
        border-color: transparent;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
    crossorigin="anonymous">
<div class="col-md-6">
    <div class="panel-group i-accordion">
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#aboutus3">
                <h4 class="panel-title"><i class="fa fa-chevron-right"></i>test</h4>
            </div>
            <div id="aboutus3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#whoweare3">
                <h4 class="panel-title"><i class="fa fa-chevron-right"></i>testtesttesttesttesttest</h4>
            </div>
            <div id="whoweare3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#contactus3">
                <h4 class="panel-title"><i class="fa fa-chevron-right"></i>testtesttesttesttesttesttesttesttestesttes ttesttestt</h4>
            </div>
            <div id="contactus3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#cold">
                <h4 class="panel-title"><i class="fa fa-chevron-right"></i>test</h4>
            </div>
            <div id="cold" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
    </div>
</div>