如何在下列情況下移除側邊填充物？

Question

我正在創建一個創建角度的單頁網站。我使用bootstrap作爲我的CSS代理。我已經在bootstrap的入門模板之上構建了它。但是，我正面臨着一些邊緣問題。這裏是我的一部分代碼：

<div class="table-responsive"> 
    <table style="width: 100%;" class="table" > 
     <thead> 
      <th style="width: 20%;">Name</th> 
      <th style="width: 25%;">Action</th> 
      <th style="width: 55%;">Description</th> 
     </thead> 
     <tbody style="text-align: left;"> 
      <tr ng-repeat="a in actionlist | orderBy:'sortname'"> 
       <td><span style="color: blue;">{{a.name}}</span></td> 
       <td> {{a.actionname}} </td> 
       <td> {{a.description}} </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

而且我的額外CSS除了通常的bootstrap.css是[請忽略導航欄CSS]：

body { 
    padding-top: 50px; 
} 

.starter-template { 
    padding: 10px 0px; 
    text-align: left; 
    width: 100%; 
} 

section.container { 
    background-color: green !important; 
} 

@media only screen and (max-width:768px) { 
    section.container { 
    width: 100% !important; 
    padding: 0; 
    } 
} 

@media (min-width: 768px) and (max-width: 991px) { 

    .navbar-collapse.collapse { 
     display: none !important; 
    } 
    .navbar-collapse.collapse.in { 
     display: block !important; 
    } 
    .navbar-header .collapse, .navbar-toggle { 
     display:block !important; 
    } 
    .navbar-header { 
     float:none; 
    } 
} 

我已經做了臨時小提琴這裏：https://jsfiddle.net/8kkb1hej/哪裏也增加了index.html的必要元素以重現問題。我對該部分給出了一個黃色背景。正如你將能夠在小提琴中看到的那樣，桌子在部分內部，但它在左側和燈光上具有填充。我希望它在部分（水平）中從頭到尾伸展，即在部分內部的表的右側或左側絕對沒有空間。我怎樣才能做到這一點？

Answer 1

這是因爲Bootstrap的container類。 Bootstrap有一個row類，可以取消container類的填充。

你可以做這樣的事情：

<section class="container"> 
    <div class="row"> 
    <!-- your stuff --> 
    </div> 
</section> 

爲了您參考，container類提供：

.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
} 

而且row類：

.row { 
    margin-right: -15px; 
    margin-left: -15px; 
} 

而且here是你的小提琴更新。

Answer 2

容器類將您的表居中。你可以去掉容器類中的部分，然後用白手起家列居中表：

<section> 
<div class="starter-template col-md-8 col-offset-2"> 
<div class="table-responsive"> 
    <table style="width: 100%;" class="table-bordered"> 
    <thead> 
     <th style="width: 20%;">Name</th> 
     <th style="width: 25%;">Action</th> 
     <th style="width: 55%;">Description</th> 
    </thead> 
    <tbody style="text-align: left;"> 
     <tr> 
     <td>Random Data</td> 
     <td>Random Data</td> 
     <td>Random Data</td> 
     </tr> 
     <tr> 
     <td>Random Data</td> 
     <td>Random Data</td> 
     <td>Random Data</td> 
     </tr> 
     <tr> 
     <td>Random Data</td> 
     <td>Random Data</td> 
     <td>Random Data</td> 
     </tr> 
     <tr> 
     <td>Random Data</td> 
     <td>Random Data</td> 
     <td>Random Data</td> 
     </tr> 
    </tbody> 
    </table> 
</div>