コンテンツの右揃え

Question

オプション（showOSpackage1、showOSPackage2）のいずれかをクリックすると、コンテンツが右側に表示されます。ユーザーがshowOSPackage1をクリックすると、コンテンツは右側に表示され、左側の領域にも占めています（表が表示されます）。任意の入力は、ユーザーがオプションをクリックしたときにコンテンツを右側にのみ表示する方法です。

デモhttp://plnkr.co/edit/npfC9EiLtBMQCDs4M2I9?p=preview

サンプルコード見つけてください：このCSSを追加

<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

試してみてください。

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

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

プラスは、あなたのplnkrブートストラップが適用されないです。