在移动设备中显示时的 Bootstrap 4 问题

Posted 2023-03-06

【中文标题】在移动设备中显示时的 Bootstrap 4 问题

【英文标题】：Bootstrap 4 issue when displaying in mobile

【发布时间】：2021-08-11 04:52:39

【问题描述】：

我的引导页面有问题。我正在尝试创建一个带有标题徽标的登录表单，但是当我在手机中查看它时，它没有正确显示。

我正在使用引导程序 4.5.2

这是我的 html：

 <div class="container">
        <div class="row">
            <div class="col-md-6 text-center justify-content-center align-items-center">
                <img src="Images/logo-lg.png"  class="img-fluid"/>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <center>
                                    <img  src="Images/profile.svg"/>
                                </center>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <center>
                                    <h3>Member Login</h3>
                                </center>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <hr>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <label>Username</label>
                                <div class="form-group">
                                    <asp:TextBox CssClass="form-control" ID="txtUsername" runat="server" placeholder="Username" required></asp:TextBox>
                                </div>
                                <label>Password</label>
                                <div class="form-group">
                                    <asp:TextBox CssClass="form-control" ID="txtPassword" runat="server" placeholder="Password" TextMode="Password" required></asp:TextBox>
                                </div>
                                <div class="form-group">
                                    <asp:Button class="btn btn-success btn-block btn-lg" ID="btnLogin" OnClick="ValidateUser" runat="server" Text="Login" />
                                </div>
                                <div class="form-group">
                                    <a href="Registration.aspx">
                                        <input class="btn btn-info btn-block btn-lg" id="btnRegistration" type="button" value="Sign Up" /></a>
                                </div>
                                <div class="form-group">
                                    <div id="dvMessage" runat="server" visible="false" class="alert alert-danger">
                                        <strong>Error!</strong>
                                        <asp:Label ID="lblMessage" runat="server" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

这是我在手机上查看时的样子。

我希望它在调整到移动设备大小时成为登录详细信息顶部的徽标。

【问题讨论】：

看起来是这样的：nimb.ws/Abg5jy 您的预期行为。此外，<center> 标签已被弃用。演示：llz5m.csb.app 如果您的代码不能这样工作，请更新它。

是的，但在我的手机中它不起作用。好像是在找一定尺寸的屏幕

只能在浏览器中使用，不能在手机中使用..

手机测试：nimb.ws/4OxMiR

@*** 你的手机屏幕宽度是多少？

【参考方案1】：

添加

<div class="col-md-6 col-sm-12">

而不是

<div class="col-md-6">

两列

【参考方案2】：

您可以使用网格系统这里是链接：

https://getbootstrap.com/docs/4.0/layout/grid/