我是bootstrap的初学者。我正在设计像这样的引导简单的常见问题页面。
这是我的风格。我试着改变位置,页边距,但我不能设法将标题和箭头缩短到中间。我该怎么做?
<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>
发布于 2018-10-11 09:25:52
您可以尝试将以下代码添加到样式中:
.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*/
}
使用position而不是float: right。移除你的float:right。
根据你所附的邮编。我在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';
...
https://stackoverflow.com/questions/52750594
复制相似问题