मैं बूटस्ट्रैप में शुरुआत कर रहा हूँ। मैं इस तरह से बूटस्ट्रैप के साथ सरल एफएक्यू पेज डिजाइन कर रहा हूं।

enter image description here

यह मेरी शैली है। मैं स्थिति, मार्जिन बदलने की कोशिश करता हूं लेकिन मैं शीर्षक और तीर को बीच में छोटा करने का प्रबंधन नहीं कर सकता। मैं कैसे करूं?

<style>
 .faqHeader {
    font-size: 27px;
    margin: 20px;
}

.panel-heading [data-toggle="collapse"]:after {
    font-family: 'Glyphicons Halflings';
    content: "\e072"; /* "play" icon */
    float: right;
    color: #F58723;
    font-size: 18px;
    line-height: 22px;
    /* rotate "play" icon from > (right arrow) to down arrow */
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

}



.panel-heading [data-toggle="collapse"].collapsed:after {
    /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    color: #454444;

}
</style>


<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">How did the Self Assessment Test come about?</a>
        </h4>
    </div>
    <div id="collapseSeven" class="panel-collapse collapse">
        <div class="panel-body">
                The Skill Optimiser Project Team has worked with all the Hiring Managers for the various job roles to understand the requirement based on 4 aspects: Product Knowledge, Job Expertise Knowledge/ Skills, Education/ Experience, and Competencies.
        </div>
    </div>
</div>
2
Khant Thu Linn 11 अक्टूबर 2018, 03:44

1 उत्तर

सबसे बढ़िया उत्तर

आप अपनी शैलियों में निम्नलिखित कोड जोड़ने का प्रयास कर सकते हैं:

.panel-heading [data-toggle="collapse"] {
    position: relative;
    display: block;
}
.panel-heading [data-toggle="collapse"]:after {
    position: absolute;
    right: 15px;
    top: 5px;
    float: right;  /*remove it*/
}

फ्लोट: दाएं के बजाय स्थिति का उपयोग करना। अपना फ्लोट:दाएं निकालें।

आपके संलग्न ज़िप के अनुसार। मैंने नीचे के रूप में index.html में आपकी शैलियों को बदल दिया है। वो कर गया काम।

.faqHeader {
    font-size: 27px;
    margin: 20px;
}
.panel-heading [data-toggle="collapse"] {
    display: block;
    position: relative;
    padding-right: 20px;
}
.panel-heading [data-toggle="collapse"]:after {
    position: absolute;
    top: 0;
    right: 0;
    font-family: 'Glyphicons Halflings';
...

enter image description here

1
Bendy Zhang 11 अक्टूबर 2018, 05:23