正确对齐内容

Question

当用户点击任何选项（showOSpackage1，showOSPackage2）时，我希望内容显示在右侧。现在当用户点击showOSPackage1时，内容显示在右侧，甚至占据左侧区域（显示表格）。任何输入如何在用户单击选项时使内容仅在右侧可见。

请查看演示http://plnkr.co/edit/npfC9EiLtBMQCDs4M2I9?p=preview

示例代码：

<div ng-controller="MainCtrl">
  <div class="row">
    <div class="vertical-menu;col-sm-3" style="width:20%;float:left;">
      <a ng-click="toggle='ShowOsPackage1'" ng-class="{ 'active' : toggle === 'ShowOsPackage1' }">
     	showOsPackage1
    	</a>
      <a ng-click="toggle='ShowOsPackage2'" ng-class="{ 'active' : toggle === 'ShowOsPackage2' }">
     	showOsPackage2
     	</a>
    </div>
    <div class="" ng-show="toggle === 'ShowOsPackage3'">
      <h1>ShowOsPackage3</h1>
    </div>

    <div class="" ng-show="toggle === 'ShowOsPackage2'">
      <h1>ShowOsPackage2</h1>
    </div>
    <div class="" ng-show="toggle === 'ShowOsPackage1'">
      <div class="row">
        <div class="col-sm-12">
          <div class="panel panel-primary">
            <div>
              <h2 style="text-align: center;">Table shown here</h2>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-xs-1"> </div>
                <div class="col-xs-8" style="width:80%;background: none;height: 660px;">
                  <table class="table table-scroll table-striped">
                    <thead>
                      <tr style="background-color: #cdd0d6;">
                        <th style="width:25%;white-space: nowrap;text-align: center;">Header1</th>
                        <th style="width:10%;white-space: nowrap;text-align: center;">Header1</th>
                        <th style="width:10%;white-space: nowrap;text-align: center;">Header3 </th>
                      </tr>
                    </thead>
                    <tbody style="width:95%;height:200px;overflow:auto;display:block;">
                      <tr>
                        <td style="width:25%;text-align: center;">
                          HEADER1 CONTENT
                          <td style="width:10%;text-align: center; ">
                            header2 content
                          </td>
                          <td style="width:10%;text-align: center;">
                            header3 content
                          </td>
                      </tr>
                      <tr>
                        <td style="width:25%;text-align: center;">
                          HEADER1 CONTENT
                          <td style="width:10%;text-align: center; ">
                            header2 content
                          </td>

Answer 1

尝试添加此css：

 .options{
   width: 20%;
   float: left;
   margin-top: 30px;
 }

  .colcontent {
   width: 80%;
   float: right;
}

另外，您的 plnkr 引导程序未应用。