在引导程序中对齐媒体对象，以便在图像周围交换文本

Question

我正在使用 Twitter boostrap example 使媒体对象的文本环绕图像。但是，这不起作用，如下图所示。

访问该站点

如何在屏幕宽度缩小时让文字环绕图像？

Answer 1

将您的图片插入 media-body 元素下，然后将其设置为 float:left;

.media-body a {
  float: left;
  margin-right: 15px;
  margin-bottom: 2px
}

<div class="media">
                       
                       <div class="media-body">
                           <a href="https://www.youtube.com/watch?v=-5iYmtBItC8" style="
    float: left;
">
                               <img class="media-object" alt="64x64" style="width: 164px; height: 100px;" src="https://img.youtube.com/vi/-5iYmtBItC8/0.jpg" data-holder-rendered="true">
                           </a> <h4 class="media-heading" id="media-heading">A dwelling place for God: 1 The secure Church</h4>
                            Santosh talks about fundamental concepts related to the faith. He address the nature of our faith, showing, how it is the foundation of everything we receive from God. In relation to faith, Santosh Poonen also talks about a dwelling place for God.
                       </div>
                    </div>

Answer 2

隐藏在 .media-body 中的 overflow: 阻止了文本环绕图像。

解决这个问题的一种方法是这样做：

.media-body {
    overflow: visible;
}

在引导程序中对齐媒体对象，以便在图像周围交换文本

Aligning Media objects in boostrap, so as to swap text around image

css

twitter-bootstrap-3