时间戳

首页 > 解决方案 > 引导 4 个彼此相邻的项目

html - 引导 4 个彼此相邻的项目

问题描述

我想将引导程序中的几个项目彼此相邻对齐。更具体地说，我有图像和文本，我希望按照下面的顺序排列，垂直和水平对齐很好，并且整理好，代码尽可能少。

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

标签： htmlcssbootstrap-4

解决方案

注意：我用 col-8 和 text-align left 删除了父 div。

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

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

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

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

您还可以使用类 (margin-auto)在列 div 中居中img和标记。pm-auto

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

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

推荐阅读