Question

我使用bootstrap，但我无法按照自己的意愿去做。

我希望它像这样的大屏幕

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

在小屏幕上播放

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

目前我只能让其中一个工作，例如当小屏幕布局工作时，大屏幕布局看起来像这样

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

子弹列表不像第一个例子那样在标题下占据上风。它总是在图像高度之后。

请参阅此处的示例代码：http://jsfiddle.net/Jw4s9/1

我应该使用像http://masonry.desandro.com/ ??

这样的东西

Answer 1

您可以添加一个类来在md断点处直接绘制图像，例如：

DEMO

<强> 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的宽度相同）。

Answer 2

你只需要制作一个可以完成网格系统的div，因为现在你在标题处有8个，在图像处有4个。所以只需在图像div之后创建一个没有任何内容的div，就像在这里： jsfiddle.net/Jw4s9/6 /

Bootstrap响应式布局挑战

2 个答案:

DEMO