Bootstrap Tischpositionseinstellung

Question

Ich habe es geschafft, die Breite meiner Tabelle und die Randposition auf margin-left:-240px; zu setzen Ich sollte die Tabelle im Bootstrap-Format einstellen, wenn ich die Größe meines Fensters ändere. Wenn ich jedoch die Größe meines Fensters ändere, scheint die Position des Tisches ein wenig von seiner Position entfernt zu sein. Wie kann ich die Tabelle auf Margin-left setzen, ohne das Bootstrap-Format zu beeinflussen?

<div class="container"> 
     <div class="row"> 
      <div class="panel panel-primary filterable"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">Hi there</h3> 
       </div> 
       <div class="table-responsive"> 
        <table class="table table-striped"> 
         <thead> 
          <tr class="filters"> 
            <th class="col-md-2"><input type="text" class="form-control" placeholder="Type" disabled></th> 
            <th class="col-md-2"><input type="text" class="form-control" placeholder="Course" disabled></th> 
            <th class="col-md-2"><input type="text" class="form-control" placeholder="Description" disabled></th> 
            <th class="col-md-1"><input type="text" class="form-control" placeholder="Credit" disabled></th> 
            <th class="col-md-2"><input type="text" class="form-control" placeholder="Hourly" disabled></th> 
            <th class="col-md-2"><input type="text" class="form-control" placeholder="Profile" disabled></th> 
            <th class="col-md-3"><input type="text" class="form-control" placeholder="Book" disabled></th> 
           </tr> 
         </thead> 
         <tbody> 
          <tr class="text-nowrap"> 
           <td>3/8/2015</td> 
           <td>1:15 PM</td> 
           <td>Field 7</td> 
           <td>Commingles</td> 
           <td>Jello Shot Jockeys</td> 
           <td>Jello Shot Jockeys</td> 
           <td>Jello Shot Jockeys</td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
      </div> 
     </div> 
    </div> 

mystyle.css

.filterable { 
    margin-top: 30px; 
    width:140%; 
    margin-left:-240px; 
} 
.filterable .panel-heading .pull-right { 
    margin-top: -90px; 
} 
.filterable .filters input[disabled] { 
    background-color: transparent; 
    border: none; 
    cursor: auto; 
    box-shadow: none; 
    padding: 0; 
    height: auto; 
} 
.filterable .filters input[disabled]::-webkit-input-placeholder { 
    color: black; 
} 
.filterable .filters input[disabled]::-moz-placeholder { 
    color: black; 
} 
.filterable .filters input[disabled]:-ms-input-placeholder { 
    color: black; 
} 

Answer 1

<div class="container-fluid"> 
    ---- navbar here ---- 
    <div class="row" style="top:100px"> 

    <!-- ----------- left margin ----------------- --> 
    <div class="col-md-2"></div> 

    <div class="col-md-10"> 
     --- Your table here --- 
    </div> 

    <!-- ----------- right margin ---------------- --> 
    <div class="col-md-2"></div> 
    </div> 
</div>