Question

我正在尝试将我的引导行放在小型设备上，但我的行遇到了问题。

他们正在触摸屏幕的边缘，它看起来非常难看，我试图用col-ex-off-2来抵消它，但现在这不仅没有帮助，而且它弄乱了屏幕媒体和大屏幕。

此外，我可以为行添加任何边距，并使文本框看起来非常难看，因为它们正在触摸。

这是bootply复制此问题的链接。请注意，文本框彼此接触，看起来很糟糕。他们也不像我希望的那样并排。

http://www.bootply.com/Ko7Ky3nj0M

cb

Answer 1

您需要更改使用表单的方式，如果将每对元素包装在＆＃34; input-group＆＃34;中，则无需添加自定义css。 class，您可以应用其他很好地分隔信息的类。如果您查看Bootsrap输入组文档here，您可以获得有关表单元素的一些示例。您可以通过使用类m-b-1（margin-bottom-1rem）添加空元素（例如标签）来解决当前问题。请注意，这是一个修补程序，否则不会推荐它。

<div class="row form-margin">


    <div class="col-xs-8 col-xs-offset-2 col-md-6 ">
            <input placeholder="Test" type="text" class="form-control" id="usr">
            <label class="m-b-2"></label>
    </div>

    <div class="col-xs-8 col-xs-offset-2 col-md-6">
            <input placeholder="Test" type="text" class="form-control" id="usr">
            <label class="m-b-2"></label>
    </div>
</div>

为小型设备定位引导行

1 个答案: