为何Bootstrap row宽度超出屏幕？求适配100%宽度方案

嘿，我来帮你搞定这个反馈表单的宽度适配问题！你的问题主要出在Bootstrap的row组件默认带有负左右外边距，如果不把它放在正确的容器里，就会导致内容超出屏幕。另外你的代码里还有几个小细节需要修正，我一步步给你说明：

问题根源 #

Bootstrap的row类默认设置了margin-left: -15px; margin-right: -15px;，用来抵消父容器container/container-fluid的内边距。如果直接把row放在body下没有容器包裹，就会出现横向滚动条或者内容超出屏幕的情况。

解决方案步骤 #

• 用container-fluid包裹最外层的row，它是100%宽度的容器，完美适配屏幕，同时能抵消row的负边距。
• 修正代码里的嵌套错误：你把右侧的col-md-3放在了col-md-6的内部，这会导致布局混乱，需要移到和col-md-6同级的位置。
• 去掉邮箱输入框多余的>>闭合标签，这会导致HTML结构错误。
• 用Bootstrap的text-center类替代<center>标签，更符合Bootstrap的规范。

修正后的完整代码 #

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
    <!-- 用container-fluid包裹最外层row，实现100%屏幕宽度 -->
    <div class="container-fluid p-0">
        <div class="row" id="getintouchrow" style="background-color: #1C2833;border: none;">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="text-center">
                    <h1 style="margin-top: 100px;font-family: 'Audiowide', cursive;color: #B2BABB">Sample Text</h1>
                    <h5 style="font-family: 'Abel', sans-serif;color: #B2BABB">Sample Text<br></h5>
                </div>
                <form style="background-color: transparent">
                    <div class="form-group">
                        <!-- 去掉了多余的>>标签 -->
                        <input type="email" class="form-control" id="InputEmail1" placeholder="Enter email" style="background-color: rgba(0,0,0,0);border-top:none;border-radius: none;border-left: none;border-right: none;">
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" id="Textarea" rows="3" placeholder="Type here" style="background-color: rgba(0,0,0,0);border-top:none;border-radius: none;border-left: none;border-right: none;"></textarea><br><br>
                    </div>
                    <div class="text-center">
                        <a href="#" class=" contact-mission btn btn-outline-dark" style="font-size: 22px;width: 300px;outline-width: 50px;height: 50px;font-family: 'Pacifico', cursive;margin-bottom: 70px;">Send Message</a>
                    </div>
                </form>
            </div>
            <div class="col-md-3"></div>
        </div>
        <div class="py-5 text-white" style="border-top-color: #1C2833">
            <div class="container">
                <div class="row">
                    <div class="col-4 col-md-1 align-self-center">
                        <a href="https://www.facebook.com" target="_blank">
                            <i class="fa fa-fw fa-facebook fa-3x text-white"></i>
                        </a>
                    </div>
                    <div class="col-4 col-md-1 align-self-center">
                        <a href="https://twitter.com" target="_blank">
                            <i class="fa fa-fw fa-twitter fa-3x text-white"></i>
                        </a>
                    </div>
                    <div class="col-4 col-md-1 align-self-center">
                        <a href="https://www.instagram.com" target="_blank">
                            <i class="fa fa-fw fa-instagram text-white fa-3x"></i>
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 mt-3 text-center">
                        <p>© Copyright 2018 - All rights reserved.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

额外优化建议 #

• 尽量把内联样式移到外部CSS文件里，这样代码更易维护。
• 按钮的btn-outline-dark在深色背景下可能不太明显，可以考虑换成btn-outline-light，让按钮更突出。

内容的提问来源于stack exchange，提问作者Aman WD