html - Bootstrap float 图像、文本和标题

Question

我开始使用 Twitter Bootstrap 3，现在我在尝试定位我的元素时遇到了问题。

我想获得这个结构(对于 xs 和 sm && 对于 md 和 lg):http://i59.tinypic.com/2yjrj2e.png

代码:

    <div class="grid col-xs-12 col-md-7">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere, massa non dictum bibendum, leo nulla vestibulum ligula, vel tempor velit enim at ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> 
    </div>

    <div class="grid col-xs-12 col-md-5">
          <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/400x300" alt="altText"/></a>
    </div>

    <div class="grid col-xs-12 col-md-5">
          <div class="foot">Some text about the picture</span></div>
    </div>

但是我无法将脚注放在正确的位置(不能在可用空间中 float )。这里有一个 jsfiddle: https://jsfiddle.net/sr7mp2rc/

有人可以帮帮我吗？

谢谢大家

Answer 1

给你。我所做的只是将您的左列嵌套在 md-7 中，将您的右列嵌套在 md-5 中。

<div class="col-md-7">
        <div class="grid col-md-7">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere, massa non dictum bibendum, leo nulla vestibulum ligula, vel tempor velit enim at ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
        </div>
</div>
<div class="col-md-5">
        <div class="grid col-xs-12">
              <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/400x300" alt="altText"/></a>
        </div>

        <div class="grid col-xs-12">
              <div class="foot">Some text about the picture</span></div>
        </div>
</div>