css - 将 2 个元素放置在 table 的相同距离处

Question

我试图将我的 2 个分页放在与我的表格相同的垂直距离处。

这适用于底部，但由于某种原因，顶部似乎在我的表格容器中。

CSS:

.table {
    width: 100%;
    max-width: none;
    clear: both;
}
.table-container {
    margin-top: 20px;
    margin-bottom: 20px;
}
section {
    margin-top: 20px;
    margin-bottom: 20px;
}
.pagination {
    display: inline;
}

Answer 1

要解决间距问题，请更改

.pagination {
  display:inline-block;
}

到

.pagination {
  display:inline; //or block
}

您还应该像这样将 .pagination 包装在 .col-xs-12 .col-md-12 div 中。始终包含 xs 类，因为 Bootstrap 是移动优先的。

<div class="row>
 <div class="col-xs-12 col-md-12">
  <ul class="pagination">
    //code
  </ul>
   //rest of code
 </div>
</div>

还有这个

<section>
 <div class="col-xs-2 col-md-2"></div>
 <div class="col-xs-8 col-md-8">
   //code
 </div>
</section>

应该是

<section>
  <div class="row>
    <div class="col-xs-2 col-md-2"></div>
    <div class="col-xs-8 col-md-8">
      //code
    </div>
  </div>
</section>

作为docs状态

Content should be placed within columns, and only columns may be immediate children of rows.