html - 输入框在移动视图之间没有空间，但在笔记本电脑上看起来不错

Question

输入框在移动视图之间没有空间，但在笔记本电脑上看起来还不错。我试图在输入框之间放置 br 标签以腾出空间，但笔记本电脑视图会改变其外观。

                                <div class="panel panel-flat " style=" border: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.18); border-radius: 9px;">
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group-xlg">
                                                <input placeholder="ስም" id="name" maxlength="12" name="ስም" type="text" style="border-radius: 9px; border: 0; background-color: #F3F4F6"
                                                       class="form-control border-bottom-0 text-size-large input-xlg">
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group-xlg">
                                                <input placeholder="የአባት ስም" id="fname" style="border-radius: 9px; border: 0; background-color: #F3F4F6" maxlength="12" name="የአባት ስም" type="text"
                                                       class="form-control border-teal border-lg input-xlg">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

标签： htmlcss

Answer 1

一个简单的方法是使用form-group元素而不是form-group-xxl. 请看这个小提琴https://jsfiddle.net/qtL1forw/1/。

如果必须使用form-group-xxl，可以为元素添加顶部和底部填充。

下一个学习步骤是远离内联样式并将您的样式规则放在样式表中。祝你好运！