如何在引导面板中分割“标题”和“图标”？

Question

我正在添加一个FAQ节在我的网站(还没有活着，所以没有链接)。我有一些小的CSS问题我无法解决。我有一个面板看起来是这样的：

​

​

问题#1:

• 没有划分图标和文本(见图像)。标题可以是长的和短的。
• 当标题长且有多行(行)时，图标不居中，图标就会下降。(见图)

我怎样才能把标题分为两个部分，其中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>

​

最新答案：

​

这个问题现在已经解决了，但仍然存在一些小问题：

• 标题和图标现在是分开的，但我需要有更多的空间图标。
• 图标仍然向下一些px，标题超过1行/行。

谢谢!

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>

​