Bootstrap响应式布局挑战

debugcn 发表于 Dev

Robjocky

我正在使用引导程序，但无法执行所需的操作。

我希望它从这样的大屏幕上走

----------------------
Headline  |          |
          |  image   |
----------|          |
Bullet    |          |
list      |          |
----------|----------|

在小屏幕上显示

----------|
Headline  |           
          |           
----------|
          |
image     |
          |
          |
          |
----------|
bullet    |
list      |
          |

目前，我只能让其中之一工作，例如，当小屏幕布局有效时，大屏幕布局如下所示

----------|----------|
Headline  |          |
          |  image   |
          |          |
          |          |
          |          |
----------|----------|
Bullet    |
list      |
          |
          |

项目符号列表不会像第一个示例那样大标题下。它总是在图像高度之后。

在此处查看示例代码：http : //jsfiddle.net/Jw4s9/1

我应该只使用http://masonry.desandro.com/吗？

jme11

您可以添加一个类以在md断点处将图像正确拉出，例如：

演示

CSS：

@media (min-width: 992px) {
    .md-pull-right {
        float: right;    
    }
}

HTML：

<div class="container">
    <div class="col-md-8">
        <h1>HEADER TEXT HERE</h1>
        <p class="lead">Some sub header text here.</p>
    </div>  
    <div class="col-md-4 md-pull-right">
        <img  src="http://www.lunkos.com/wp-content/uploads/2009/11/lolcat-faith-heealer.jpg" />
    </div>    
    <div class="col-md-8 lead">
        <ul>
            <li>1. Point number one</li>
            <li>2. Point number two</li>
            <li>3. Point number three</li>
        </ul>
    </div>    
</div>

另外，您希望无序列表为col-md-8，以便为图像留出空间（即，其宽度应与标题div相同）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。