html - Bootstrap 在网格元素中嵌入图片

Question

我发现 bootstrap v3.0.0 和最新版本 v3.3.0 之间存在差异。我昨天大部分时间都在试图弄清楚，但没有任何运气。如果我使用以下代码将图像嵌入到网格元素中:HTML:

<div class="container-fluid">
    <div id="page-content" class="application-body-home">
        <h1>Heading</h1>
        <div id="intro" class="row-fluid">
            <div class="well">
                <div id="introPic" class="media-left">
                <p>
                  <img style="float: left; margin:0px 15px 15px 0px; height: 200px;" src="http://tmacfitness.com/wp-content/uploads/2013/04/Beauty-of-nature-random-4884759-1280-800.jpg" class="img-responsive">

              In ancient manuscripts, another means to divide sentences in into paragraphs was a line break (newline) followed by an initial at the beginning of the next paragraph. An initial is an oversize capital letter, sometimes outdented beyond the margin of text. This style can be seen, for example, in the original Old English manuscript of Beowulf. Outdenting is still used in English typography, though not commonly.[4] Modern English typography usually indicates a new paragraph by indenting the first line. This style can be seen in the (handwritten) United States Constitution from 1787. For additional ornamentation, a hedera leaf or other symbol can be added to the inter-paragraph whitespace, or put in the indentation space.
              </p>
            </div>
          </div>
        </div>
    </div>

</div>

CSS:

/* CSS used here will be applied after bootstrap.css */

#col1 {
  background-color: #f1f2f6;

}
#col1:first-child {
  padding: 0 4px 0 0;
}
#col1:nth-child(2) {
  padding: 0 4px;
}
#col1:last-child {
  padding: 0 0 0 4px;
}
.col-inside{
border: solid 1px #000000;
}

#intro{
    border: solid 2px #000000;
  }

在 v3.3.0 ( v3.3.0 example ) 中似乎有效，但在 v3.0.0 ( v3.0.0 example ) 中无效。在 v3.0.0 中，当窗口变大时，图像不会停留在它所在的 row 内。

有没有办法让它在 v3.0.0 中工作？

Answer 1

添加 .well{ overflow:auto; 到您的 CSS 将允许父级封装后代元素。