uib-tab對齊問題

Question

我已經使用uib-tabset實現了選項卡。 標簽的對齊存在問題。 如您在下圖中所看到的，我的“當前”標簽向左移動，正在移出存儲卡，在“當前”和“即將到來”之間留有不舒服的空間。 我希望兩個標簽都與卡完美對齊。 有什么辦法嗎？

我嘗試了多種更改CSS的方法（尤其是.nav-tabs），但是沒有運氣。

HTML：

<div class="container">
      <div class="row"> 
      <div class="col-md-6 col-md-offset-3">
    <div class="card" style="margin-left:3%;margin-right:3%" ng-controller="AppointmentsCtrl">


        <uib-tabset active="active">
        <div class="row">
            <div class="col-xs-6 nav nav-tabs">
                <uib-tab index="0" heading="Current"> <!-- -->
                <ul class="list-group">
                    <li class="list-group-item">
                         <!-- <div id="accordion" role="tablist" aria-multiselectable="true"> -->
                            <div class="panel panel-default" style="border-color: white;">
                                <div class="panel-heading" role="tab" id="headingOne"
                                    style="background-color: #686868; margin-top: 5%;">
                                    <div class="row">
                                        <div class="col-xs-2">
                                            <div class="myimage">
                                                <img id="image" src="img/Calender.png"
                                                    style="width: 30px; height: 30px;"></img>
                                                <p id="text">26</p>
                                            </div>
                                        </div>
                                        <div class="col-xs-8">
                                            <p class="panel-title" data-toggle="collapse"
                                                data-parent="#accordion"
                                                ng-click="isCollapsed = !isCollapsed" aria-expanded="true"
                                                aria-controls="collapseOne"
                                                style="color: white; font-size: 15px">
                                                Monday, 26 Sep 2016<br> 02:00 PM
                                            </p>
                                        </div>
                                        <div class="col-xs-2">
                                            <a data-toggle="collapse" data-parent="#accordion"
                                                ng-click="isCollapsed = !isCollapsed" aria-expanded="true"
                                                aria-controls="collapseOne"><img id="arrow"
                                                src="img/Down_Arrow.png" style="width: 30px; height: 30px;"></img></a>
                                        </div>
                                    </div>
                                </div>
                                <div id="collapseOne" uib-collapse="isCollapsed"
                                    class="panel-collapse collapse" role="tabpanel"
                                    aria-labelledby="headingOne"
                                    style="background-color: #d5d5d5;">
                                    <div class="row">
                                        <div class="col-xs-6 col-sm-offset-1">
                                            <h5 style="color: #696969; margin-top: 5%;">Visitor
                                                Name</h5>
                                            <h5 style="color: #000; font-weight: bold;">Subodh
                                                Bagade</h5>
                                            <h5 style="color: #696969;">Purpose</h5>
                                            <h5 style="color: #000; font-weight: bold;">Sales
                                                Meeting</h5>
                                        </div>
                                        <div class="col-xs-6">
                                            <img src="img/Gray_User.png"
                                                style="margin-top: 10%; width: 110px; height: 100px;"></img>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <!-- <a ng-href="#/viewdetails/appointmentId={{appointment.appointmentId}}"> -->
                                            <a ng-href="#/viewdetails/appointmentId=1"> <img
                                                src="img/more.png" style="width: 30px; height: 30px;"></img>
                                            </a>
                                        </div>
                                        <div class="col-xs-4">
                                            <!-- <a ng-href="#/edit/appointmentId={{appointment.appointmentId}}"> -->
                                            <a ng-href="#/edit/appointmentId=1"> <img
                                                src="img/Edit_White.png" style="width: 30px; height: 30px;"></img>
                                            </a>
                                        </div>
                                        <div class="col-xs-4">
                                            <a ng-href="#" onClick="confirm('Are you sure?')"> <img
                                                src="img/Delete.png" style="width: 30px; height: 30px;"></img>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <!--    </div> -->
                    </li>


                </ul>
                <!-- --> </uib-tab>
            </div>


            <div class="col-xs-6 nav nav-tabs">
                <uib-tab index="1" heading="Upcoming">
                <p>Some text here.</p>
                </uib-tab>
            </div>
        </div>
        </uib-tabset>

    </div>
       </div>

     </div>  
</div>

我的CSS的一部分：

.nav-tabs {
border-bottom: 1px solid #ddd;
}

.nav-tabs>li {
/*   float: left;  */
margin-bottom: -1px;
background-color:#E9880A;
}

.nav-tabs>li>a {
margin-right: 2px;
line-height: 0.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}

Answer 1

這看起來更像是對齊問題。 分別對齊選項卡后，它應該可以正常工作。 我可以通過單獨調整標簽來使其對齊。