Bootstrap:类似于浮动的行为可能吗? [英] Bootstrap: behaviour similar to float possible?

问题描述

我使用 bootstrap 3 构建了一个网站，它有一个新闻部分，其中每篇新闻文章应如下所示:

移动优先:

------------|标题 |------------------------|图像 |------------------------|内容 ||内容 |------------

在更大的屏幕上:

---------------------------|图像 |标题 |||-------------------|-------|内容 |||内容 |---------------------------

我不希望内容在图像周围浮动，它应该留在它的列中，这就是我试图用引导程序解决这个问题的原因.

我看了那两篇文章，但它们并没有完全解决我的问题:

• Bootstrap:通过 pull 更改 div 顺序- 右，向左拉/3 列
• https://scotch.io/tutorials/reorder-css-columns-使用引导程序

更新:发现这个问题涵盖了一个类似的案例.但是勾选的解决方案建议浮动.只有这样吗?

解决方案

<div class="row"><div class="col-sm-4 col-md-push-4">标题</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">内容 <br/>内容

这应该可以解决问题.这是一个 bootply http://www.bootply.com/xTBHlj60ws

I built a website with bootstrap 3, it has a news section where each news article should look like the following:

mobile-first:

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

on bigger screens:

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

I don't want the content to float around the image, it should stay in its column, that is why I seek to solve this with bootstrap.

I had a look at those two articles, but they did not quite takle my problem:

• Bootstrap: change div order with pull-right, pull-left / 3 columns
• https://scotch.io/tutorials/reorder-css-columns-using-bootstrap

Update: Found this question that covers a similar case. But the ticked solution proposes to float. Is that the only way?

解决方案

<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>

This should do the trick. Here's a bootply http://www.bootply.com/xTBHlj60ws

这篇关于Bootstrap:类似于浮动的行为可能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！