时间戳

首页 > 解决方案 > 如何对齐图像下方和侧面的文本并将它们与css bootstrap 4放在同一行

css - 如何对齐图像下方和侧面的文本并将它们与css bootstrap 4放在同一行

问题描述

我想将 2 个不同的文本一侧和图像下方对齐为 1 篇文章。
并且希望在窗口大小为 col-md 或更大时将 2 篇文章放在同一行。

在此处输入图像描述 我希望在窗口大小小于 col-sm 的情况下，在文章 1 下显示第二篇文章。

在此处输入图像描述

我试过下面的代码，但我不能把它们放在同一行。
如何将它们放在同一行？

  <div class="row">
      <div class = 'col-4 col-md-2'>
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      </div>

      <div class="col-8 col-md-4">
        <p>"aricle 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>
  <div class="row">
      <div class="col-12 col-md-6">
        <p>"article 2 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>


  <div class="row">
      <div class = 'col-4 col-md-2'>
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      </div>

      <div class="col-8 col-md-4">
        <p>"aricle 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>
  <div class="row">
      <div class="col-12 col-md-6">
        <p>"aricle 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>

标签： cssbootstrap-4

解决方案

你应该使用 display:flex; 对于行。对于屏幕尺寸较小的情况，您应该考虑@media 查询。如果您需要其他任何内容，请告诉我。

@media all and (min-width:992px){
  .art{
      margin-left:80px;
  }
  }
@media all and (min-width:768px) and (max-width:991px){
  .art{
      margin-left:100px!important;
  }
}
@media all and (min-width:768px){
  .container{
      display:flex;
      flex-direction:row;
  }
  .row{
      flex-direction:row;
      
  }
}

.row{
     display:flex;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="container-fluid">
<div class="row">
      <div class ="col-4 col-md-2">
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      </div>

      <div class="art col-8 col-md-6">
        <p>"article 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>
  <div class="row">
      <div class="col-12 col-md-6">
        <p>"article 2 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>
  </div>
  <div class="container-fluid">
  <div class="row">
      <div class ="col-4 col-md-2">
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      </div>

      <div class="art col-8 col-md-6">
        <p>"article 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>
  <div class="row">
      <div class="col-12 col-md-6">
        <p>"article 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>
  </div>
  </div>
  </body>
  </html>

推荐阅读