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>

除了通常的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;
    }
}

我在这里做了一个临时的小提琴：https://jsfiddle.net/8kkb1hej/我在index.html添加了必要的元素来重现问题。我给出了相关部分的黄色背景。正如您将能够在小提琴中看到的那样，桌子位于该部分内部，但它在左边有一个填充物并且很轻。我希望它在部分（水平）从一端到另一端伸展，即在该部分内的桌子的右侧或左侧绝对没有空间。我怎样才能做到这一点？

Answer 1

这是因为Bootstrap的container课程。 Bootstrap有一个row类可以取消container类＆＃39;填充。

您可以这样做：

<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

容器类使您的表居中。您可以删除部分中的容器类，然后使用bootstraps列使表居中：

<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>

在下列情况下如何删除侧边填充？

2 个答案: