0

我正在使用 Bootstrap 4，并且我有以下 jumbotron 类：

.rounded-circle{
    vertical-align: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    left: -150px;
    top: -50px;
  }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="jumbotron rounded-0">
  <div class="container">
   <div class="row">
    <div class="col-md-4">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/500px-Circle_-_black_simple.svg.png" alt="..." class="rounded-circle">
    </div>
    <div class="col-md-8">
    this is mobile way of the container and other line
    </div>
  </div>
 </div>
</div>

使用这种语法，我的桌面视图也会显示如下， https://i.stack.imgur.com/mUrAe.png

但在我的移动视图中，它没有显示在正确的位置，如下https://i.stack.imgur.com/SaRuW.png

那么我如何在所有设备（台式机、标签和手机）上查看我的图像和描述，我需要在小设备顶部图像中，然后在图像下进行描述。

编辑后的图像 新的桌面视图

4

1 回答 1

0

在这里使用position: absolutewith是错误的col，flex-box 为您提供了使您尝试在没有 的情况下达到的行为的实用程序position: absolute，

首先align-items-center在类旁边添加类row（这将垂直对齐中心）

其次将类添加col-12到列中（在图像下方进行描述以减小尺寸）

然后可选地，您可以添加类text-center并且text-md-left（在较大的尺寸上，它将向左对齐，在较小的尺寸上，它将居中）

.rounded-circle{
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="jumbotron rounded-0">
  <div class="container">
   <div class="row align-items-center text-center text-md-left">
    <div class="col-12 col-md-4">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/500px-Circle_-_black_simple.svg.png" alt="..." class="rounded-circle">
    </div>

    <div class="col-12 col-md-8">
    this is mobile way of the container and other line
    </div>

  </div>
 </div>
</div>

于 2021-01-05T12:36:11.323 回答