數據網格設計通過引導

Question

我的工作網格，並引導設計3.

我使用的是HTML5，CSS和與React.js引導。

我有一個數據網格和（我的網格被固定數據表）

• 濾波器輸入

• 分頁工具

• 和三個小按鈕，其改變在相同的狀態我網格（不管他們在做什麼，但他們必須每次都看到）。

我的網格寬度有時可能非常小，有時可能會非常大。

• 我想濾波器輸入是在位置左上網格的

• 3個按鈕是在網格

• 分頁工具的位置右上方是的總是中心底部網格

問題是網格寬度可以每次都改變。我希望我的過濾器輸出，分頁工具和3個按鈕始終處於位置b y網格的寬度。

我的代碼如下所示：

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

我不能處理它now.What你建議一下我能使用的面板設計或別的吧？

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的分頁控制的三個鍵，pagination pagination-4四個按鈕等 您還可以使用JavaScript來動態地設置各.page-link的寬度。