html - 在以下情况下如何删除侧边距？

Question

我正在创建一个创建 Angular 单页网站。我使用 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> 

除了通常的 bootstrap.css 之外，我的额外 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;
    }
}

我在这里做了一个临时的 fiddle :https://jsfiddle.net/8kkb1hej/我也从 index.html 添加了必要的元素以重现问题。我已经为相关部分提供了黄色背景。正如您将能够在 fiddle 中看到的那样，表格位于该部分内，但它在左侧和浅色处有填充。我希望它在该部分(水平)中从一端延伸到另一端，即该部分内表格的右侧或左侧绝对没有空间。我怎样才能做到这一点？

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 {
    margin-right: -15px;
    margin-left: -15px;
}

和here你的 fiddle 更新了吗？