Question

我想将bootstrap中的几个项目彼此相邻。更具体地说，我有图像和文字，我想按照下面的顺序，垂直和水平对齐很好，整理，尽可能少的代码。

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

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

最后一件事，如果列的崩溃仅适用于移动设备（低分辨率）会很好，但最终并不是什么大不了的事。

＆＃13;

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

＆＃13;

Answer 1

注意：我使用col-8删除了父div，其中text-align left。

要在行中垂直居中，请将align-items-center添加到row div。要将列水平和垂直居中放置在该行的部分中，请将班级align-self-center添加到col-sm-* div。

如果您希望列在移动设备上折叠（超小），则需要使用col-sm-*类，这意味着它们将在小型或更大的设备上占用n列，并且因此，它将占用额外小型设备（标准电话，<576px宽）的100％空间。

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

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

您还可以使用img类（margin-auto）将p和m-auto标记置于列div中。

对于这种类型的布局（img与左侧文本对齐），您还可以尝试使用Bootstrap 4 Media对象：https://getbootstrap.com/docs/4.1/layout/media-object/（查看＆＃39;中心对齐的＆＃39;示例）< / p>

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

bootstrap 4个项目彼此相邻

1 个答案: