javascript - 偏心 Bootstrap 可折叠面板

Question

我有一个带有偏心指示箭头的 Bootstrap 可折叠面板。我想使箭头居中。这是我使用的 CSS:

.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 -->                   
  

Answer 1

我认为问题在于 .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";
}