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系列上看到的还要小。话虽这么说，一个选择是响应性地隐藏某些冗余项目，以便按钮更小。

你可以包含“报告”这个词。 $post = new Post(); post->name_of_col_1 = $request->get('name_of_col_1'); $post->creator_id = $request->get('creator_id'); 中的{及其前面的空格）在较小的设备上工作时隐藏该单词。

＆＃13;

＆＃13;

.hidden-xs

＆＃13;

＆＃13;

＆＃13;

注意：上面的代码还清除了一些不良语法（<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 ）。