html - 当屏幕宽度减半时，Bootstrap 将我的内容向下推送

Question

<div class="container">
    <img style="float:left" src="assets/images/logo.png" alt="university logo">
    <h1  style="float:left;color:white;padding-top:20px;text-align:center;margin-left:10%"> Welcome To SURE Model</h1>
    <a style="float:left;margin-left:27%;margin-top:40px" (click)="logout()" class="btn btn-danger btn-lg"> <span class="glyphicon glyphicon-log-out"></span> Log out </a>
</div>

这是全屏图片

如果我将屏幕尺寸缩小到一半，它会变成这样

那么我怎样才能让它响应呢？

Answer 1

你确实 float 了 3 个标签 img h1 a 因为它向下推以通过 Bootstrap 做出响应我建议使用类 .row 并在其中包含一个带有 col-md 或 col-lg 的类，用于 secify paltform 目标