调整窗口大小时在 Bootstrap 网格内居中元素答案

【问题标题】：Centering elements inside Bootstrap grid when resizing window调整窗口大小时在 Bootstrap 网格内居中元素
【发布时间】：2020-08-09 07:58:22
【问题描述】：

我正在努力制作我正在处理的可调整大小的网页。我已经通过使用边距属性成功地使元素居中，但是一旦我开始调整浏览器窗口的大小，我的徽标和运送图像就会不合适，直到它变得非常小并且连续下降。这是全尺寸时的 15.6 英寸屏幕。 [![全尺寸][1]][1]

调整大小时会发生这种情况：

[!resized][2]][2]

这没关系，当调整到最小宽度时： [![最小宽度][3]][3]

我想避免第二张图片中的情况，同时保持全尺寸窗口和最小宽度窗口的外观。我应该怎么做，我一直在努力以我想要的方式为每个窗口高度/宽度定位元素，所以我想通过这个项目一劳永逸地掌握它。

【问题讨论】：

标签： css bootstrap-4 resize

【解决方案1】：

解决了我使用以下 css 获取船舶图像的问题：

max-width: 100%;
height: auto;
width: auto\9; /* ie8 */

【讨论】：

【解决方案2】：

能否请您发布到目前为止您有什么样的代码？如我所见，您应该在这里有三个不同的容器-第一个是第一艘船的图片，第二个是战舰徽标和表单容器，第三个是船舶容器。如果您使用引导程序执行此操作，您应该有如下代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
    <div class="row">
      <div class="first_ship col-sm-12 col-md-4 text-center">
        <img src="http://www.vache.me/dobule/img/favorites_3.jpg" alt="Ship Image">
      </div>
      <div class="battleshipLogin col-sm-12 col-md-4">
        <div class="text-center">Battleship</div>
        <div class="form_container text-center">
          <input type="text">
          <input type="text">
        </div>
      </div>
      <div class="second_ship col-sm-12 col-md-4 text-center">
        <img src="http://www.vache.me/dobule/img/favorites_3.jpg" alt="Ship Image">
      </div>
    </div>
</div>

【讨论】：