twitter bootstrap - 最小宽度列？

Question

之前必须要求这一点，但我不会想到我的＆＃34;条款＆＃34;是对的。

我有一个包含文字的页面，然后是一个图像。当图像结束时，我希望文本在图像下流动。

所以，

<div class="row">
   <div class="col-xs-10  col-xs-offset-1  ">
      <div class="hero-unit row">
         <div class="col-xs-12 ">
            <h2 class="welcome">welcome</h2>
          </div>

         <div class="col-xs-8 ">
            <p>some text here</p>

            <p>imagine there is more text here</p>

            <p>just, the most text ever.</p>
         </div>//col-xs-8

         <div class="solidClass col-xs-4 ">
            <img class="img-responsive" src="/WebContent/img/both.png" alt="screenshots"/>
         </div>        

      </div>//hero-unit-row
   </div> //col-xs-10
</div>//row

在上面的场景中，＆＃34; col-xs-8＆＃34;中的文本。当文本越过col-xs-4行中的图像时，行应该溢出。

有什么东西我可以通过课程来讲述引导程序，或者我可以添加到专业课程来实现这一点吗？

Answer 1

为了达到预期的效果，图片必须与文字位于同一个父元素中。

然后，您可以使用bootstrap的pull-right类将元素浮动到右侧。

我也假设您希望文本能够适应完整的12个col宽度。如果您希望图像仍然限制为4列宽，则可以将其包装在bootstrap col-xs-4类中。

<div class="row">
   <div class="col-xs-10  col-xs-offset-1  ">
      <div class="hero-unit row">
         <div class="col-xs-12 ">
            <h2 class="welcome">welcome</h2>
          </div>

         <div class="col-xs-12">
            <div class="col-xs-4 pull-right">
              <img class="img-responsive" src="/WebContent/img/both.png" alt="screenshots"/>
            </div>
            <p>some text here</p>

            <p>imagine there is more text here</p>

            <p>just, the most text ever.</p>
         </div>
      </div>
   </div>
</div>

Bootply在这里：http://www.bootply.com/hANj4uFgb2

Answer 2

此布局所需的结构是下一个：

<div class="col-xs-12">

    <div class="solidClass col-xs-4 pull-right">
        <img class="img-responsive" src="http://lorempixel.com/100/100" alt="screenshots" />
    </div>

    <p>some text here</p>
    <p>imagine there is more text here</p>
    <p>just, the most text ever.</p>
</div>

演示：http://plnkr.co/edit/vSq4rsJPbjfvdn6FYiR9?p=preview

两个要点：

1. 使用.col-xs-12类将“左”文本容器扩展为全宽。

2. 将图片容器移动到文本容器中并使用pull-right类向右浮动。