Bootstrap 数据网格设计

Question

我正在研究 Grid 并使用 bootstrap 3 进行设计。

我正在使用 html5、css 和带有 React.js 的引导程序。

我有一个数据网格和（我的网格是固定数据表）

• 过滤输入

• 分页工具

• 还有三个小按钮，它们在我的网格中改变相同的状态（不管它们在做什么，但每次都必须看到它们）。

我的网格的宽度有时可能很小，有时可能很大。

• 我希望过滤器输入位于网格的左上角

• 3 个按钮位于网格的右上角

• 分页工具始终位于网格底部的中心

问题是网格宽度每次都会改变。我希望我的过滤器输出、分页工具和 3 个按钮始终按网格宽度定位。

我的代码如下所示：

<div>
  <div className="col-xs-2">
   <input type="text" className="form-control"  placeholder='Filter' />
  </div>

 <div className="pull-center">
    <button type="button" className="btn btn-sm btn-default" >o</button>
    <button type="button" className="btn btn-sm btn-warning">o</button>
    <button type="button" className="btn btn-sm btn-danger">o</button>
 </div> 
 <div className="col-xs-12">
       <Table>  
       </Table>          
      <PagerDemo/> 
  </div>
</div> 

我现在无法处理。您对此有何建议？我可以使用面板设计或其他任何东西吗？

Answer 1

要使过滤器和按钮与表格的宽度相同，您可以将它们排成一行：

<div class="row">
  <div class="col-xs-7">
    <input type="text" class="form-control">
  </div>
  <div class="col-xs-5">
    <div class="row">
      <div class="col-xs-4">
        <button class="btn btn-primary btn-block">X</button>
      </div>
      <div class="col-xs-4">
        <button class="btn btn-primary btn-block">X</button>
      </div>
      <div class="col-xs-4">
        <button class="btn btn-primary btn-block">X</button>
      </div>
    </div>
  </div>
</div>

至于分页，你得根据一排按钮的数量准备几个类。水平按钮的最大数量必须是合理的。

.pagination { display: block; }
.pagination .page-link { text-align: center; }
.pagination-1 { width: 100%; }      /* 100 / 1 */
.pagination-2 { width: 50%; }       /* 100 / 2 */
.pagination-3 { width: 33.33%; }    /* 100 / 3 */
/* ... */
.pagination-7 { width: 14.28%; }    /* 100 / 7 */

现在您可以简单地将pagination pagination-3 添加到具有 3 个按钮的分页控件，pagination pagination-4 用于四个按钮等。 也可以使用javascript动态设置每个.page-link的宽度。