Question

我正在努力实现以下目标：

     iiii   text 
     iiii   text
     iiii   text
            text
            text

哪里

     iiii
     iiii
     iiii

是图片，右侧是文本。

如果我尝试引导程序的类float-left，我会得到以下信息：

     iiii   text 
     iiii   text
     iiii   text
     text         <-- Text under the image
     text

基本上，其余文本在图片下方。

对于图像下方的文字，最左侧的图像清洁方法是什么？

Answer 1

要使用的正确元素是媒体对象-它具有media-left和media-body元素，其中包含文本和可选标题。

.media-body {
padding: 16px;
} 

.media-heading {
 font-size: 18px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-12">
    <div class="media-object">
      <div class="media">
        <div class="media-left">
          <img src="https://i.pinimg.com/originals/e5/3c/fb/e53cfb282846313a69daf9755bfaf339.jpg" class="media-object" alt="fluffy kitten" height="150" title="Fluffy Kiten" data-toggle="tooltip" data-placement="right">
        </div>
        <div class="media-body">
          <div class="media-text-content">
          <h3 class="media-heading">Fluffy kitten</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
       </div>
      </div>
    </div>
  </div>
</div>

或者-您可以交换文本和图像，并使用media-right来获取右侧图像，而标题和文本在左侧。

.media-body {
padding: 16px;
} 

.media-heading {
 font-size: 18px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>


<div class="row">
  <div class="col-12">
    <div class="media-object">
      <div class="media">
        <div class="media-body">
          <div class="media-text-content">
          <h3 class="media-heading">Fluffy kitten</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
       </div>
       <div class="media-right">
          <img src="https://i.pinimg.com/originals/e5/3c/fb/e53cfb282846313a69daf9755bfaf339.jpg" class="media-object" alt="fluffy kitten" height="150" title="Fluffy Kiten" data-toggle="tooltip" data-placement="right">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

只需使用两列的行即可：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-6">
    <img src="https://placehold.it/100">
  </div>
  <div class="col-6">
    Text<br />
    Text<br />
    Text<br />
    Text<br />
    Text<br />
    Text<br />
    Text<br />
    Text<br />
    Text
  </div>
</div>

左侧的自举浮动图片

2 个答案: