Bootstrap 数据网格设计

Posted 2023-03-05

【中文标题】Bootstrap 数据网格设计

【英文标题】：Data Grid Design by Bootstrap

【发布时间】：2016-06-06 15:46:54

【问题描述】：

我正在研究 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> 

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

【参考方案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的宽度。

【讨论】：

我试过了，但是当表格宽度很小时，它看起来不像我想要的那样。过滤器和按钮的宽度看起来比表格宽度大。

你能创建一个 jsfiddle 吗？