html - 引导彼此相邻的 4 个元素

Question

我想将 bootstrap 中的几个元素并排对齐。更具体地说，我有图像和文本，我希望按照下面的顺序排列，垂直和水平对齐很好，而且代码尽可能少。

+----------------+-----------------------------+
| centered image |  here is some centered text |
+----------------+-----------------------------+
| centered image |  here is some centered text |
+----------------+-----------------------------+
| centered image |  here is some centered text |
+----------------+-----------------------------+

无论如何，我相信有比我现在做的更好的方法。这是我到目前为止所做的。

最后一件事，如果列的折叠仅适用于移动设备(低分辨率)，那会很好，但最终这没什么大不了的。

<div class="col-sm-8 text-left">
  <div class="container">
    <div style="margin: 110px 0px 0px 0px"></div>
    <div class="row">
      <div class="col-xs-12">
        Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome!
      </div>
    </div>
    <div class="row" style="margin: 30px 0px 0px 0px">
      <div class="col-xs-3">
        <img src="./images/1.png" height="150">
      </div>
      <div class="col-xs-9" style="padding: 40px;">
        <p>This is my super super super super dummy dummy text text text text.</p>
      </div>
    </div>
    <div class="row" style="margin: 0px 0px 0px 0px">
      <div class="col-xs-3" style="padding: 30px 0px 0px 0px">
        <img src="./images/2.png" height="150">
      </div>
      <div class="col-xs-9" style="padding: 0px 0px 0px 40px;">
        <div style="width:500px;">
          <p>This is my super super super super dummy dummy text text text text.</p>
        </div>
      </div>
    </div>
    <div class="row" style="margin: 30px 0px 0px 0px">
      <div class="col-xs-3" style="margin: 30px 0px 0px 0px">
        <img src="./images/Change.png" height="150">
      </div>
      <div class="col-xs-9" style="padding: 10px 0px 0px 40px;">
        <div style="width:500px;">
          <p>
            This is my super super super super dummy dummy text text text text
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

注意:我删除了带有 col-8 且文本左对齐的父 div。

要使列在行中垂直居中，请将 align-items-center 添加到 row div。要在行的一部分内水平和垂直居中列，请将类 align-self-center 添加到 col-sm-* div。

如果您希望列在移动设备上折叠(特别小)，您需要使用 col-sm-* 类，这意味着它们将在设备上占用 n 个列小或大，因此将占用超小设备(标准手机，<576px 宽)100% 的空间。

Nodir Rashidov 也是正确的，Bootstrap 4 已经用 col-* 替换了 Bootstrap 3 的 col-xs-* 类，因为它是最低的断点，因此是默认的适用于最小的屏幕。

Bootstrap 4 还具有用于填充和边距的实用类，因此您无需将它们添加为内联样式:https://getbootstrap.com/docs/4.1/utilities/spacing/

您还可以使用 m-auto 类 (margin-auto) 将 img 和 p 标记居中。

对于这种类型的布局(img 与左侧文本对齐)，您还可以尝试使用 Bootstrap 4 媒体对象:https://getbootstrap.com/docs/4.1/layout/media-object/ (查看“居中对齐”示例)

  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome! Welcome!
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-sm-3 align-self-center">
        <img src="./images/1.png" height="150">
      </div>
      <div class="col-sm-9 align-self-center">
        <p>This is my super super super super dummy dummy text text text text.</p>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-sm-3 align-self-center">
        <img src="./images/2.png" height="150">
      </div>
      <div class="col-sm-9 align-self-center">
          <p>This is my super super super super dummy dummy text text text text.</p>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-sm-3 align-self-center">
        <img src="./images/Change.png" height="150">
      </div>
      <div class="col-sm-9 align-self-center">
          <p>This is my super super super super dummy dummy text text text text</p>
      </div>
    </div>
  </div>