响应式表导航栏与twitter bootstrap

Question

我正在尝试使用twitter bootstrap为我的桌子创建一个导航栏。

最终结果看起来像这样

我试图使用bootstraps网格系统，似乎已经让显示行部分按计划进行查看，但是当用户切换到移动设备时，无法使按钮响应。

HTML

react-native run-ios

按钮似乎只能在彼此之上呈现。

这是jsfiddle显示发生了什么。

Answer 1

每个按钮都包含在一个带有引导类“col-sm-12”和“col-xs-12”的div中。这意味着每个div将占用每列12列，从而不会让其他按钮或div的列位于同一行。

要获得所需的结果，请将其类更改为“col-sm-2”，以便每个按钮的div占12个中的两列。

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，并在移动设备上做出了更快的响应