html - 内容单独移动 - HTML

Question

有人能解释一下为什么当我切换选项卡时，两个选项卡上的内容都没有水平对齐吗？

如果您注意到，当您转到文档时，内容表会向左移动。

我无法弄清楚为什么会这样。有什么帮助吗？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="content">
  <ul class="nav nav-tabs">
    <!-- ngIf: !vm.selectedTicket.customerName1 && !vm.selectedTicket.customerName2 -->
    <!-- ngIf: vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2 -->
    <li ng-if="vm.selectedTicket.customerName1 &amp;&amp; vm.selectedTicket.customerName2" class="ng-scope" style=""><a data-toggle="tab" href="#customer1Content" class="ng-binding" aria-expanded="false"><i class="glyphicon glyphicon-user"></i>&nbsp;Customer 1 Information</a></li>

    <!-- end ngIf: vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2 -->
    <li class=""><a data-toggle="tab" href="#documentContent" class="ng-binding" aria-expanded="false"><i class="glyphicon glyphicon-file"></i>&nbsp;Document Information</a></li>
  </ul>
  <div class="tab-content top5">
    <!-- ngIf: !vm.selectedTicket.customerName1 && !vm.selectedTicket.customerName2 && vm.selectedTicket.customerName -->
    <!-- ngIf: vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2 -->
    <div ng-if="vm.selectedTicket.customerName1 &amp;&amp; vm.selectedTicket.customerName2" id="customer1Content" class="tab-pane fade ng-scope" style="">
      <table class="table ipp-simple-table">
        <tbody>
          <tr>
            <th class="first-no-border ng-binding">Customer Number</th>
            <td class="first-no-border ng-binding">333</td>
          </tr>
          <tr>
            <th class="ng-binding">Customer Name</th>
            <td class="ng-binding">Name1</td>
          </tr>
          <tr>
            <th class="ng-binding">Birth Date</th>
            <td class="ng-binding">08.12.2017</td>
          </tr>
          <tr>
            <th class="ng-binding">Account Number</th>
            <td class="ng-binding">123</td>
          </tr>
          <tr>
            <th class="ng-binding">Status</th>
            <td>
              <!-- ngIf: vm.selectedTicket.status.description == 'New' --><span ng-if="vm.selectedTicket.status.description == 'New'" class="ipp-color ng-scope"><b class="ng-binding">New</b></span>
              <!-- end ngIf: vm.selectedTicket.status.description == 'New' -->
              <!-- ngIf: vm.selectedTicket.status.description == 'Closed' -->
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th class="ng-binding">Target Ticket
            </th>
            <td>
              <select ng-options="ticket.docid for ticket in vm.tickets" ng-model="vm.selectedTicket" class="ng-pristine ng-untouched ng-valid">
                <option label="1" value="object:49">1</option>
                <option label="2" value="object:50">2</option>
                <option label="3" value="object:51">3</option>
                <option label="4" value="object:52">4</option>
                <option label="5" value="object:53">5</option>
                <option label="6" value="object:54" selected="selected">6</option>
              </select>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <!-- end ngIf: vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2 -->
    
    <div id="documentContent" class="tab-pane fade">
      <table class="table ipp-simple-table">
        <thead>
        </thead>
        <tbody>
          <tr>
            <th class="first-no-border ng-binding">Document ID</th>
            <td class="first-no-border ng-binding">6</td>
          </tr>
          <tr>
            <th class="ng-binding">Document Date</th>
            <td class="ng-binding">05.12.2018</td>
          </tr>
          <tr>
            <th class="ng-binding">Document Type</th>
            <td class="ng-binding">9999</td>
          </tr>
          <tr>
            <th class="ng-binding">Description</th>
            <td class="w-50 ng-binding">Unkategorisiert</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th class="ng-binding">Target Ticket</th>
            <td>
              <select ng-options="ticket.docid for ticket in vm.tickets" ng-model="vm.selectedTicket" class="ng-pristine ng-untouched ng-valid">
                <option label="1" value="object:49">1</option>
                <option label="2" value="object:50">2</option>
                <option label="3" value="object:51">3</option>
                <option label="4" value="object:52">4</option>
                <option label="5" value="object:53">5</option>
                <option label="6" value="object:54" selected="selected">6</option>
              </select>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

标签： htmltwitter-bootstrap