Bootstrap 按钮移动尺寸问题

Question

我下面有两个 Bootstrap 按钮：

<div class="row">
    <div class="col-sm-6 col-xs-6 col-xxs-12">
            <button class="btn editReport">Edit Report</button>
    </div>
    <div class="col-sm-6 col-xs-6 col-xxs-12">
            <button class="btn pull-right submitReport">Submit Report</button>
    </div>
</div>

桌面视图

"Edit Report"按钮在页面左侧，"Submit Report"按钮在页面右侧。它在普通桌面视图上工作正常，但在移动视图上存在问题。

运行进入如下问题：

和

Google 周围但没有帮助。如何让这两个按钮保持在彼此的顶部和下方，并在移动视图中对齐到中间？

谢谢。

Answer 1

您报告的问题只能发生在非常的小型移动设备上；甚至比您在 iPhone 4 系列上看到的还要小。话虽这么说，一种选择是响应性地隐藏某些冗余项目，以便按钮更小。

您可以将单词 'Report'（及其前面的 space）包裹在 .hidden-xs 中，以便在较小的设备上工作时隐藏该单词。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">
      <button class="btn btn-default">Edit<span class="hidden-xs"> Report</span></button>
    </div>
    <div class="col-xs-6 text-right">
      <button class="btn btn-default">Submit<span class="hidden-xs"> Report</span></button>
    </div>
  </div>
</div>

注意：上面的代码还清理了一些糟糕的语法（.col-xs-6 和 .col-sm-6 是多余的；如果您只是将 .text-right 应用于列，则 .pull-right 是不必要的等）。

Bootstrap 按钮移动尺寸问题

Bootstrap buttons mobile sizing issue

css

button

alignment

sizing

twitter-bootstrap