Question

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

移动先行：

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

在更大的屏幕上：

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

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

我看过这两篇文章，但他们并没有解决我的问题：

更新：找到涵盖类似案例的this question。但是勾选的解决方案建议浮动。这是唯一的方法吗？

Answer 1

<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

Answer 2

如果你不介意额外的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>

Answer 3

我玩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?

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

3 个答案: