-1

这是视觉演示：图片

我正在尝试将我的笔记本电脑列（col-md-8）第二列，但是当我尝试时，另一个在笔记本电脑的列下，我该如何放置第二个（col-md-6）列在笔记本电脑柱内，该柱笔记本电脑仍然具有其全尺寸。

4

2 回答 2

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”类将在平板电脑视图+桌面视图中保留您喜欢的列内容，但是当它像智能手机视图一样变小时，它将扩展到全宽的列，您仍然可以在笔记本电脑栏内查看您的东西。

请从这里阅读引导文档。其他任何您想要快速谷歌的东西都会解决您的问题，或者我们在 stackoverflow 为您提供帮助。:)

更新

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

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

于 2016-04-12T00:07:31.123 回答
0

您说您希望它具有响应性，因此您必须：

  • 保持您的笔记本电脑元素纵横比与图像相同。
  • 有一个屏幕元素，即使笔记本电脑的图像尺寸由于填充父元素而发生变化，它也将始终填充笔记本电脑的屏幕。

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

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

于 2016-04-12T00:43:05.103 回答