Bootstrap：类似于float的行为可能吗？

我建了一个网站，引导3，它有一个新闻栏目，其中每个新闻文章应该看起来像下面这样：Bootstrap：类似于float的行为可能吗？

移动第一：

------------ 
| Title | 
------------ 
------------ 
| Img  | 
------------ 
------------ 
| Content | 
| Content | 
------------

在更大的屏幕：

--------------------------- 
| Img | Title   | 
|  |------------------ 
|-------| Content  | 
|  | Content  | 
---------------------------

我不希望内容在图像周围浮动，它应该留在它的列中，这就是为什么我试图用bootstrap解决这个问题。

我看了一下这两个条款，但他们并没有完全TAKLE我的问题：

更新：发现this question，涵盖了类似案件。但被选中的解决方案建议浮动。这是唯一的方法吗？

来源

2015-04-30 Teetrinker

如果你不介意额外的HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4 hidden-sm hidden-xs"> 
      img 
     </div> 
     <div class="col-sm-12 col-md-8"> 
      <div class="row"> 
       <div class="col-sm-12"> 
        title 
       </div> 
       <div class="col-sm-12 hidden-md hidden-lg"> 
        img 
       </div> 
       <div class="col-sm-12"> 
        content 
        <br />content 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

来源

2015-04-30 12:14:49 potatopeelings

这是更多的原则，它可以做到没有浮动:-)。无论如何，我认为如果你想让上面的布局看起来漂亮，你肯定会希望为移动设备和桌面设备创建不同的图像。此外，相同的图像相同的页面 - 浏览器只是重用图像。在开发人员工具中，您应该只能看到1次对服务器的调用。退房http://stackoverflow.com/questions/5240897/loading-the-same-image-repeatedly – potatopeelings

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-4 col-md-push-4">Title</div> 

     <div class="row"> 
     <div class="col-sm-12 col-md-4 col-md-pull-4">Img</div> 
     <div class="col-sm-12 col-md-4 col-md-push-4"> 
      Content <br/> 
      content 
     </div> 
     </div> 
    </div> 
</div>

这应该做的伎俩。这里是一个bootply http://www.bootply.com/xTBHlj60ws

来源

2015-04-30 12:24:09

你得到我的+1是使用推/拉类的唯一答案。 – DavidG

您的解决方案看起来不错。感谢你如此快速。但它只需要8列。我无法使用它来处理12列（现在正在处理它）。它不会对齐。 – Teetrinker

我玩弄了answer of Joe Swindell。它不与自举网格对齐。它只使用8而不是12列。

这是他的代码的简化版本，效果更好。

<div class="container"> 
    <div class="row"> 
     <div class="col-md-8 col-md-push-4">Title</div>   
     <div class="col-md-4 col-md-pull-8">Img</div> 
     <div class="col-md-4 col-md-push-4">Content</div> 
    </div> 
</div>

但它并不完美。我写了第二个问题：Bootstrap: Why does this column not float and how can I change that?

来源

2015-04-30 15:30:12 Teetrinker

Bootstrap：类似于float的行为可能吗？

回答

相关问题