输入框在移动视图中没有空格，但在笔记本电脑上看起来还可以

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>

Answer 1

一种简单的方法是使用const App = (props) => <ChildComponent /> class ChildComponent extends React.Component { constructor(props){ super(props); this.state = { results: [] } } componentDidMount(){ fetch('/api/endpoint') .then(res => res.json()) .then(results => this.setState({results}) } render(){ return <GrandchildComponent {...this.state} /> } } const GrandchildComponent = (props) => <div>{props.results}</div> 元素而不是form-group。请看这个小提琴https://jsfiddle.net/qtL1forw/1/。

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

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

Answer 2

这解决了。

                                <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" style="padding-top: 7px;padding-bottom: 7px;">
                                            <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" style="padding-top: 7px;padding-bottom: 7px;">
                                            <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 class="row">
                                        <div class="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-4" style="padding-top: 7px;">
                                            <div class="form-group-xlg text-center ">
                                                <input placeholder="እድሜ" id="age" style="border-radius: 9px; border: 0; background-color: #F3F4F6"
                                                       maxlength="2" name="እድሜ" type="tel"
                                                       class="form-control border-lg input-xlg text-center">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>