Question

如何使用移动显示屏中的引导程序在一行中创建两个按钮？我使用此代码，但在移动视图中它显示2行。

    <div class="row" style="margin-top:50px">
        <div class="col-md-12 col-centered">
            <div class="col-md-3"></div>
            <div class="col-md-3 text-center">
                <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/>
                <h3>Ajukan Izin</h3>
            </div>
            <div class="col-md-3 text-center">
                <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/>
                <h3>Ajukan Cuti</h3>
            </div>
            <div class="col-md-3"></div>
        </div>
    </div>

Answer 1

您必须使用col-sm- *类才能定位小型设备

编辑：

<div class="row" style="margin-top:50px">
    <div class="col-md-12 col-sm-12 col-centered">
        <div class="col-md-3 hidden-sm"></div>
        <div class="col-md-3 col-sm-6 text-center">
            <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/>
            <h3>Ajukan Izin</h3>
        </div>
        <div class="col-md-3 col-sm-6 text-center">
            <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/>
            <h3>Ajukan Cuti</h3>
        </div>
        <div class="col-md-3 hidden-sm"></div>
    </div>
</div>

Answer 2

你必须添加你的按钮divs类：col-xs-3以及在移动设备上调整它。在平板电脑上查看其col-sm-3

选中此Fiddle

要在bootstrap检查中完整引用断点： Bootstrap Grid

Answer 3

我稍微编辑了wlalele的回答。此处所需的更改是为较小的移动设备屏幕添加额外的类（col-xs-3）。

<div class="row" style="margin-top:50px">
    <div class="col-md-12 col-sm-12 col-centered">
        <div class="col-md-3 hidden-sm col-xs-3"></div>
        <div class="col-md-3 col-sm-6 col-xs-3 text-center">
            <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/>
            <h3>Ajukan Izin</h3>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-3 text-center">
            <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/>
            <h3>Ajukan Cuti</h3>
        </div>
        <div class="col-md-3 hidden-sm col-xs-3"></div>
    </div>
</div>

手机上的1行2个自举按钮

3 个答案: