Question

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

我想获得这种结构（对于xs和sm＆amp;＆amp;对于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>

但我不能将脚信息放在适当的位置（不要漂浮在自由空间）。这里有一个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>

Answer 2

<div class="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 class="hidden-xs hidden-sm col-md-12">
    <div class="foot">Some text about the picture</div>
    </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"/>
        </div>

        <div class="grid hidden-md  col-xs-12">
              <div class="foot">Some text about the picture</div>
        </div>
</div>

您的代码中的其他所有内容都可以使您的图像块标签和响应。检查CSS

.foot {display:block; background-color:#ffc; color:#0c0; text-align:right; padding:10px; box-sizing:border-box;}

.img-responsive {width:100%; height:auto; display:block; margin-bottom:10px;}

Bootstrap浮动图像，文本和标题

2 个答案: