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

这看起来更像是对齐问题。单独对齐选项卡后，它应该可以正常工作。我能够通过单独调整标签来使其对齐。