引导，以行跨度

嗨复杂的嵌套列我想实现的东西像下面的图片中显示（使用引导3.3.2）引导，以行跨度

enter image description here

我成功地创建了第一个块（第一个图像可以这么说吧）但是有可能创建设计的方式，它会自动转换为图像中的第二个设计？

我很努力（不确定是否有可能）。需要注意的一件重要事情是，第一个设计中的Ad1必须跨越两个第一行。不幸的是，在ad1下面开始row2并不是一个选项。

这里是我的第一个块的帮助

编辑

我加入了要求的jsfiddle由

<div class="row"> 
    <div class="col-sm-12 col-lg-8 "> 
    <div class="row"> 
     <div col-sm-4 col-lg-4 "> 
      Img1 
     </div> 
     <div class="news-entry-content col-sm-8 col-lg-8 "> 
      Text1 
     </div> 
    </div> 
    <div class="row"> 
     <div class="news-entry-image col-sm-4 col-lg-4"> 
      Img2 
     </div> 
     <div class="news-entry-content col-sm-8 col-lg-8"> 
      Text2 
     </div> 
    </div> 
</div> 
<div class="col-sm-12 col-lg-4" title="First News Werbiung"> 
    Ad1 
</div>

感谢 http://jsfiddle.net/v0r5y7q9/

只是玩弄宽度。你会注意到两个问题。

随着一个大宽度：广告被放置下面（IMG2 +文本2），我希望它下面放置（IMG3 +文本3）
宽度较窄：（IMG3 +文本3）是与其他行相比。有道理，考虑我是如何构建整个事情的。对此的一个解决方案可能是负边界。还是有更好的解决方案？

谢谢。

来源

2015-03-13 Arikael

你能用完整的代码创建一个小提琴吗？ – 2015-03-13 08:06:54

我在问题中加了一个提琴 – Arikael 2015-03-13 09:06:28

这可能是一个解决办法：jsfiddle

see jsfiddle link

这两个广告块可见/隐藏，但我没有找到一个更好的解决方案。

p.s.如何直接在帖子中放置jsfiddle-link？

来源

2015-03-13 10:38:27 crealex

在这里你可以找到如何添加链接到你的文章：http://stackoverflow.com/editing-help#links – 2015-03-13 12:16:15

没有... really..sorry，但它不起作用。我得到一个错误，jsfiddle链接必须被放置为代码...我不知道...我只是觉得愚蠢...对不起 – crealex 2015-03-13 14:33:44

... ahh..finally ...“伴随的代码”。 ..谢谢 – crealex 2015-03-13 14:39:47

如果您的项目上的元素的高度是固定的，我会用这个周转来得到你想要的。只需将您的添加改为绝对位置并将其放置在元素的底部即可。如在此fiddle

@media only screen and (max-width : 500px) { 

    .ad1 { 
    position:absolute; 
    /*and bottom:x based on the height of your elements*/ 

}}

来源

2015-03-13 08:32:03

引导，以行跨度

回答

相关问题