调整 window 大小时使 Bootstrap 网格内的元素居中

Question

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

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

[!resized][2]][2]

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

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

Answer 1

通过关注 css 船舶图像解决了我的问题：

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

Answer 2

请问 post 到目前为止，您拥有什么样的代码？如我所见，这里应该有三个不同的容器 - 第一个是第一艘船的图片，第二个是战舰标志和表格容器，第三个是船舶容器。如果您使用 bootstrap 执行此操作，您应该具有如下代码：

<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>

调整 window 大小时使 Bootstrap 网格内的元素居中

Centering elements inside Bootstrap grid when resizing window

css

resize

bootstrap-4