帶有Twitter引導程序的響應表導航欄

Question

我正在嘗試使用twitter bootstrap為我的表創建導航欄。

最終結果看起來像這樣

我試圖為此使用bootstraps網格系統，並且似乎已經使顯示的行部分按計划顯示，但是當用戶切換到移動設備時無法使按鈕響應。

的HTML

            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> <!-- controls !-->
                        <div class="col-xs-12 col-sm-12">
                            <a href="#">Back</a>
                        </div> 
                        <div class="col-xs-12 col-sm-12">
                            <a href="#">First</a>
                        </div>       
                       <div class="col-xs-12 col-sm-12">
                            <a href="#">Previous</a>
                        </div>   
                       <div class="col-xs-12 col-sm-12">
                            <a href="#">Next</a>
                        </div>   
                        <div class="col-xs-12 col-sm-12">
                            <a href="#">Last</a>
                        </div>   
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"><!-- page number !-->
                        <div class="pull-right">
                            <span>Showing rows 1 to 10 of 20</span>
                        </div>
                    </div>
                </div>
            </div>

這些按鈕似乎只能相互渲染。

這是一個jsfiddle，顯示正在發生的事情。

Answer 1

您的每個按鈕都用引導類“ col-sm-12”和“ col-xs-12”包裹在div中。 這意味着這些div中的每個div都會占用12列，因此，沒有其他列或div位於同一行的列。

為了獲得所需的結果，請將其類更改為“ col-sm-2”，以便每個按鈕的div占據十二列中的兩列。

Answer 2

那按鈕組呢？

<div class="btn-group" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Back</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">First</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Previous</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Next</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Last</button>
  </div>
  <div class="btn-group" role="group">
    <span>Showing rows 1 to 10 of 20</span>
  </div>
</div>

在顯示行中添加了EDIT，並在移動設備上提高了響應速度