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>

桌面检视

页面左侧是“编辑报告”按钮，页面右侧是“提交报告”按钮。 它在普通桌面视图上可以正常工作，但移动视图存在问题。

遇到如下问题：

和

谷歌周围，但没有帮助。 如何使这两个按钮位于顶部和底部，并在移动视图中与中间对齐？

谢谢。

Answer 1

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

您可以在.hidden-xs包装单词“ Report”（及其前面的空格），以在较小的设备上工作时隐藏该单词。

 <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是多余的；如果.pull-right列应用.text-right等，则不需要.pull-right ）。