页脚Css样式错误的解决方案

时间:2017-09-12 14:46:54

标签: html css

当我切换到移动视图时,我的页脚没有在它之前的div之后舔,它看起来很笨拙。

Mobile View

Desktop View

这是代码示例                                                                                                                     名称                                                                                                                  

                      <div class="row row-sm-offset">
                    <div class="col-md-4 multi-horizontal" data-for="email">
                       <div class="form-group" style="color: #fff;">
                            <label class="form-control-label mbr-fonts-style display-7" for="email-form1-h">Email</label>
                            <input type="email" class="form-control" name="email" data-form-field="Email" required="" placeholder="E-mail" id="email-form1-h">
                        </div>
                    </div>
                    </div>

                    <div class="row row-sm-offset">
                    <div class="col-md-4 multi-horizontal" data-for="phone">
                        <div class="form-group" style="color: #fff;">
                            <label class="form-control-label mbr-fonts-style display-7" for="phone-form1-h">Phone</label>
                            <input type="tel" class="form-control" name="phone" data-form-field="Phone" placeholder="Phone #" id="phone-form1-h">
                        </div>
                    </div>
                </div>

                <div class="row row-sm-offset">
                    <div class="col-md-4 multi-horizontal" data-for="phone">
                <div class="form-group" style="color: #fff;">
                    <label class="form-control-label mbr-fonts-style display-7" for="message-form1-h">Message</label>
                    <textarea type="text" class="form-control" name="message" rows="7" data-form-field="Message" placeholder="Message" id="message-form1-h"></textarea>
                </div>
                </div>
                </div>

                <span class="input-group-btn"><button href="" type="submit" class="btn btn-primary btn-form display-4"><span class="mbri-paper-plane mbr-iconfont mbr-iconfont-btn"></span>SEND MESSAGE</button></span>
            </form>

感谢您的支持。感谢

1 个答案:

答案 0 :(得分:0)

我觉得您可以使用clearfix来解决此问题,但如果没有更多上下文和代码,则很难回答。

如果您不知道clearfix是什么,请谷歌。

更新回答:

在表单标记结束后添加div ...

<div class="clearfix"></div>

然后将此样式添加到CSS。

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
 }