html - 如何使这个包含文本、按钮和文本框的 div 部分在所有屏幕尺寸下都能顺畅响应？

Question

我有我的@media 代码，但它没有很好地对齐。我希望你能帮助我将内容从 320px 对齐到移动设备的 767。平板电脑为 768px 至 800px。我的html代码对吗？我无法顺利对齐内容:(

html代码:

<div class="container-fluid header-subscribe-section">
                <div class="container">
                    <div class="row">
                        <div class="col-md-7">
                            <p>
                                <span class="header-p-latestmenus font-Awesome white">Get our latest games in your inbox.</span>
                                <span class="header-p-subscribe font-GreatVibes white">Subscribe Now!</span>
                            </p>
                        </div>
                        <div class="col-md-5" id="mobile-enter-email">
                            <input type="text" name="lname" class="header-textboxemail font-Awesome white" placeholder="Email Address">
                            <button type="button" class="header-btsubscribe font-GaramondPremierePro">SUBSCRIBE</button>
                        </div>
                    </div>
                </div>
            </div>

CSS 代码:

.header-subscribe-section {background-color:#ad1f34; height:99.27px; width:100%}
.header-p-latestmenus{font-size:20px; letter-spacing:0.5px;}
.header-p-subscribe{font-size:28px; letter-spacing:0.5px;}
.header-btsubscribe{border-radius:4px; background-color:#831024; color:white; width:134.55px; height:44.19685px; width:146.19685px; border:none;font-size:18px;}
.header-textboxemail{width: 286.779527559px;height: 46.19685px;font-size: 17px;border: 0;}
.header-subscribe-section p{padding: 4% 14%;}

header-subscribe-section: the alignment can be changed for mobile

Answer 1

您可以将 col-xs-36 添加到您的父级 div，通常我们在较小的屏幕上将输入宽度设置为 100%

将 css 文件中的宽度属性更改为 100%安德移除高度