Bootstrap 列中列

Question

这是视觉演示：Image

我想把我的笔记本电脑列(col-md-8)放在第二列，但是当我尝试的时候，另一个列在笔记本电脑的列下面，我怎么能把第二列(col- md-6) 列在笔记本电脑列内，并且该列笔记本电脑仍具有完整尺寸。

Answer 1

你想要这样吗？这是一个非常简短且混乱的描述。所以我希望我是对的。

<div class="row">
    <div class="col-md-8 col-sm-12">
        <div class="row">
            <div class="col-md-6 col-sm-6">
                Laptop Image
            </div>
        </div>
    </div>
</div>

"col-md-8 col-sm-12" classes 将在平板电脑视图+桌面视图中按您喜欢的方式保留您的列内容，但当它像智能手机视图一样变小时，它会扩展到列的全宽，您仍然可以在笔记本电脑栏中看到您的东西。

请阅读 here 中的 bootstrap 文档。您想要的任何其他快速 google 都可以解决您的问题，或者我们会在 Whosebug 帮助您解决问题。 :)

更新

这就是你想要的，不是吗？ https://jsfiddle.net/5jrt314r/2/

现在 .inside class 中的任何内容都将取决于您拥有的笔记本电脑图像大小。它会根据你的 .laptop class 自动水平和垂直居中。

Answer 2

你说你想要它响应所以你必须：

让您的笔记本电脑元素纵横比与图片相同。
有一个屏幕元素将始终填满笔记本电脑的屏幕，即使笔记本电脑的图像尺寸因填充父元素而发生变化也是如此。

如果我是对的，你想要这个：

HTML:

<div class="row">
    <div class="col-xs-8  laptop">
        <div class="row">
            <div class="col-xs-offset-3 col-xs-9 screen">
                This column need to go in laptop screen
            </div>
        </div>
    </div>
</div>

CSS:

.laptop {
  background: url('http://devel0p.com/damir/wp-content/themes/helium/images/portofolio/macbook.png');
  background-size: 100%;
  background-repeat: no-repeat;
 /* Padding will keep element aspect ratio so we always show image in it's original aspect ratio */
  padding-bottom: 89.32%;
}

.screen {
  background: red;
  /* Make sure this element is always the size of the screen */
  padding-bottom: 64%;
}

我通过将宽度除以高度计算出的图像宽高比为 89.32~%，高度分别为 2084px 和 2333px。

这是一个codepen示例http://codepen.io/anon/pen/aNqKZL

更新

在第一个示例中，.screen 元素会超出笔记本电脑屏幕，因为它被内容拉伸了。这是一个处理它的版本 http://codepen.io/anon/pen/qZxKRo

Bootstrap 列中列

Bootstrap Column in column

html

css

twitter-bootstrap

responsive