我有一个自举式可折叠面板，其指示箭头偏离中心。
我想把箭头居中。这是使用的css Im：
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}<div class="panel panel-default" id="pnlSubmission">
<div class="panel-heading">
<h4 class="panel-title" style="text-align:center;">
<a data-toggle="collapse" data-target="#collapseFour" href="#Submission" class="collapsed"><h3>Submission<span style="color:#FFCC33">.</span></h3></a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<!-- <div class="panel-heading"></div> -->
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="tab1default">
<div class="container-fluid">
<div id="rootwizard">
<ul class="nav nav-tabs" role="tablist" style="margin-bottom:10px;">
<li><a href="#step1" role="tab" data-toggle="tab">Step One</a></li>
<li><a href="#step2" role="tab" data-toggle="tab">Step Two</a></li>
<li><a href="#step3" role="tab" data-toggle="tab">Step Three</a></li>
</ul>
<!-- 3. Create a matching tab pane for each tab. Content goes within these panes -->
<div class="tab-content">
<div class="tab-pane active" role="tab" id="step1">
<div id="rootwizard2">
<h4 style="color:#268AA8;margin-top:2em;">1. Select source:</h4>
<ul>
<li class="active"><a href="#YoutubeTab" data-toggle="tab"><img src="Content/youtube.png" style="width:3em;height:3em;"/></a></li>
<li><a href="#VimeoTab" data-toggle="tab"><img src="Content/vimeo.png" style="width:3em;height:3em;"/></a></li>
<li><a href="#MetacafeTab" data-toggle="tab"><img src="Content/Metacafe.png" style="width:3em;height:3em;"/></a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="YoutubeTab">
<h4 style="color:#268AA8;margin-top:2em;">2. Search for Youtube Title:</h4>
<div>
<div class="text-center">
<br/>
<asp:Label ID="lblYoutubeTitle" runat="server" style="width:auto;"></asp:Label>
<br /><br />
<img id="ThumbNailYoutube" src=""/>
<br/>
</div>
<br/>
<div class="row">
<div class="col-lg-3 col-md-3 col-lg-offset-1 col-md-offset-1">
<h5 style="color:#268AA8;margin-top:2em;">Type in the Search-bar then select the specific video or clip from the dripdown</h5>
<asp:TextBox ID="txtYoutubeSearch" runat="server"></asp:TextBox><asp:TextBox ID="TxtTags" runat="server" Visible="true" style="display:none;"></asp:TextBox><asp:TextBox ID="TxtDataID" runat="server" Visible="true" style="display:none;"></asp:TextBox><asp:TextBox ID="txtTitleClip" runat="server" style="display:none;" Visible="true"></asp:TextBox>
<br/>
<asp:Label ID="lblYoutubeID" runat="server"></asp:Label> <br/>
<select id= "dropDownDest" style="width:200px;" ></select>
</div>
<div class="col-lg-3 col-lg-offset-3 col-md-3 col-md-offset-3">
<h5 style="color:#268AA8;margin-top:4em;">- OR - <br /> Paste a Youtube Link here.</h5>
<asp:TextBox ID="txtYoutubePaste" runat="server"></asp:TextBox>
</div>
<br />
<br />
</div>
</div>
</div>
<div class="tab-pane" id="VimeoTab" style="align-items:center;"><br /><p>Coming Soon.</p></div>
<div class="tab-pane" id="MetacafeTab" style="align-content:center;"><p>Coming Soon.</p></div>
<div class="tab-pane" id="CommingSoon" style="align-content:center;"><p>Coming Soon.</p></div>
</div></div>
<div class="tab-pane" id="step2">
<br />
<h4 class="text-center" style="color:#268AA8;">3. Can you give us a description?</h4>
<h5 class="text-center" style="color:#268AA8;">To link to a specific time in the clip write the time in this form "HH:MM:SS".</h5>
<div style="align-items:center;text-align:center;">
<div class="row">
<div class="col">
<textarea id="txtEditor" runat="server" ></textarea>
</div>
</div>
</div>
<br />
</div>
<div class="tab-pane" id="step3">
<br />
<div class="row">
<div class="col-lg-2 col-md-2 col-lg-offset-2 col-md-offset-2">
<h4 style="color:#268AA8;">4. Is it a podcast, video or music?</h4>
<div style="align-items:center;text-align:center;">
<br/>
<asp:DropDownList ID="ddlVideoTypes" runat="server" Width="100" ></asp:DropDownList>
</div><br/>
</div>
<div class="col-lg-4 col-md-4 col-md-offset-1 col-lg-offset-1"
<h4 class="text-center" style="color:#268AA8;margin-top:4em;">5. Add Tags</h4>
<br/><br/><br/>
<div id="MovieDiv" >
<telerik:RadAutoCompleteBox ID="ddlMovieGenre" runat="server" style="width:auto;" InputType="Token" AllowCustomEntry="true" EmptyMessage="Hover over the '!' for more info"></telerik:RadAutoCompleteBox>
</div>
<div id="MusicDiv">
<telerik:RadAutoCompleteBox ID="ddlMusicGenre" runat="server" style="width:auto;" InputType="Token" EmptyMessage="Hover over the '!' for more info" AllowCustomEntry="true"></telerik:RadAutoCompleteBox>
</div>
<div id="PodcastDiv">
<telerik:RadAutoCompleteBox ID="ddlPodcastGenre" runat="server" style="width:auto;" InputType="Token" AllowCustomEntry="true" EmptyMessage="Hover over the '?' for more info"></telerik:RadAutoCompleteBox>
</div>
<br />
</div>
<h5 class="text-center" style="color:#268AA8;margin-top:5em;">Finished! Click Submit</h5>
</div>
</div>
<br /><br /><br />
<ul class="pager wizard">
<li class="first previous"><a href="#Submission" accesskey="f">First</a></li>
<li class="previous"><a href="#Submission" accesskey="p">Previous</a></li>
<li class="last" style="display:none;" ><a href="#Submission">Done</a></li>
<li class="next"><a href="#Submission" accesskey="n">Next</a></li>
</ul>
</div>
<!-- progress bar -->
<h4 class="text-center" style="color:#268AA8;margin-top:10px"> Status of submission</h4>
<div class="progress"><div id="progressBar" class=" progress-bar progress-bar-striped"><div class="bar"/></div></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer"><div style="text-align:center;"><asp:Button ID="btnModalSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" CssClass="btn btn-default"/></div></div>
</div> <!-- This is the Panel Collapse -->
</div> <!-- This is the Panel Everything must be in for Submission -->
最佳答案
我认为问题在于.panel-heading的宽度是容器的100％。
我修改了CSS，为图标添加了绝对位置。
Demo
.panel-heading a:after {
position: absolute;
top: 35px;
right: 10px;
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
position: absolute;
top: 35px;
right: 10px;
content: "\e080";
}
关于javascript - 偏离中心的Bootstrap可折叠面板，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30529959/