Offcent Bootstrap可摺疊面板

Question

我有一個帶偏心指示箭頭的引導可摺疊面板。 我想中心箭頭。下面是使用的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"> \t \t   \t 
 
\t \t   <div id="rootwizard"> 
 
        <ul class="nav nav-tabs" role="tablist" style="margin-bottom:10px;"> 
 
\t \t \t   <li><a href="#step1" role="tab" data-toggle="tab">Step One</a></li> 
 
\t \t \t   <li><a href="#step2" role="tab" data-toggle="tab">Step Two</a></li> 
 
\t \t \t   <li><a href="#step3" role="tab" data-toggle="tab">Step Three</a></li> 
 
\t \t \t  </ul> 
 
        
 

 
\t \t \t <!-- 3. Create a matching tab pane for each tab. Content goes within these panes --> 
 
\t \t  \t <div class="tab-content"> 
 
\t \t \t \t <div class="tab-pane active" role="tab" id="step1"> 
 
        <div id="rootwizard2"> 
 
         <h4 style="color:#268AA8;margin-top:2em;">1. Select source:</h4> \t 
 
         <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> \t 
 
        <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>           
 
\t \t \t \t 
 
        <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> 
 

 

 

 

 
\t \t \t \t <div class="tab-pane" id="step2"> 
 
        <br /> 
 
\t \t \t \t <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 />      
 
\t \t \t \t </div> 
 

 
\t \t \t \t <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" 
 
\t \t \t \t  <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>    
 
\t \t \t \t </div> 
 
         
 
             
 
        </div> 
 
         <br /><br /><br /> 
 
        <ul class="pager wizard"> 
 
\t \t \t \t \t <li class="first previous"><a href="#Submission" accesskey="f">First</a></li> 
 
\t \t \t \t \t <li class="previous"><a href="#Submission" accesskey="p">Previous</a></li> 
 
\t \t \t \t \t <li class="last" style="display:none;" ><a href="#Submission">Done</a></li> 
 
\t \t \t \t \t <li class="next"><a href="#Submission" accesskey="n">Next</a></li> 
 
\t \t \t \t </ul> 
 

 
\t \t \t  </div> 
 

 

 
        <!-- progress bar --> 
 
        <h4 class="text-center" style="color:#268AA8;margin-top:10px"> Status of submission</h4> 
 
\t \t \t  <div class="progress"><div id="progressBar" class=" progress-bar progress-bar-striped"><div class="bar"/></div></div> \t   
 
             \t \t 
 
\t \t   </div> \t     \t \t \t \t 
 
\t    </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"; 
}