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类，其中包含您需要的列大小。

＆＃13;

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

＆＃13;

Answer 2

输入和按钮都需要设置为显示：内联，它们应该放在同一列中。以下工作，应满足您的需求：

＆＃13;

<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">
                <input id="title" class="form-control d-inline w-70 float-left" placeholder="Title" autocomplete="off" name="title" type="text" value="">
                <a id="btn-verify" class="btn btn-primary float-left d-inline">Verify</a>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 3

您是否尝试过堆叠bootstrap col类？

lg / md / sm都针对不同的屏幕尺寸阈值。使用倍数应该可以帮助您定义在给定方案中应占用的空间。我会说你可以从那个输入中窃取一些房地产。

您也可以考虑将它们放在同一个div中。

使用堆叠col类修改代码：

<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 col-sm-6">
                <input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
            </div>
            <div class="col-md-2 col-sm-6">
                <a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
            </div>
        </div>
    </div>
</div>

按钮未在较小的设备上内联

3 个答案: