richtige Ausrichtung des Inhalts

Question

Wenn Benutzer auf eine der Optionen klicken (showOSpackage1, showOSPackage2), möchte ich den Inhalt auf der rechten Seite angezeigt werden. Gerade jetzt, wenn der Benutzer auf showOSPackage1 klickt, wird der Inhalt auf der rechten Seite angezeigt und sogar der Bereich auf der linken Seite belegt (Tabelle wird angezeigt). Wie kann ich den Inhalt nur auf der rechten Seite sichtbar machen, wenn der Benutzer auf eine Option klickt?

finden Sie die Demo http://plnkr.co/edit/npfC9EiLtBMQCDs4M2I9?p=preview

Beispielcode:

<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

Versuchen Sie, diese CSS:

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

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

Plus ist Ihr plnkr Bootstrap nicht angewendet wird.