html - 按钮未内嵌在较小的设备上

Question

我有一个看起来像这样的表格(在大型设备上，例如电脑显示器)

这是应该的。然而，在较小的设备上它看起来像这样:

按钮不再与输入在同一行。我的代码如下所示:

<div class="form-group ">
    <label class="col-md-2 control-label">Title</label>
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-10">
                <input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
            </div>
            <div class="col-md-2">
                <a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
            </div>
        </div>
    </div>
</div>

如何确保它在使用较小的设备时也能正确对齐？ PS:正在使用Bootstrap

Answer 1

您的列是 col-md，这意味着当屏幕宽度低于 992px 时，列将占据页面的整个宽度。因此，如果您希望它们保持内联，请添加具有您需要的列大小的 col-xs 类。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group ">
    <label class="col-md-2 control-label">Title</label>
    <div class="col-md-10">
        <div class="row">
            <div class="col-xs-10">
                <input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
            </div>
            <div class="col-xs-2">
                <a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
            </div>
        </div>
    </div>
</div>