引导按钮移动尺寸问题答案

【问题标题】：Bootstrap buttons mobile sizing issue引导按钮移动尺寸问题
【发布时间】：2018-04-16 16:09:36
【问题描述】：

我在下面有两个引导按钮：

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

桌面视图

“编辑报告”按钮位于页面左侧，“提交报告”按钮位于页面右侧。它在普通桌面视图上运行良好，但在移动视图上存在问题。

遇到如下问题：

和

谷歌搜索但没有帮助。我怎样才能让这两个按钮保持在彼此的顶部和下方，并在移动视图中对齐到中间？

谢谢。

【问题讨论】：

标签： css twitter-bootstrap button alignment sizing

【解决方案1】：

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

您可以在.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。

【讨论】：