使用 Bootstrap 3 拉伸背景布局答案

【问题标题】：Stretched background layout using Bootstrap 3使用 Bootstrap 3 拉伸背景布局
【发布时间】：2015-01-28 14:58:20
【问题描述】：

我正在使用 Bootstrap 3 将布局转换为 HTML/CSS。

我的问题是，如何在 Bootstrap 中实现以下布局，以使矩形中突出显示的部分仅显示在宽度为 1000+ 像素的屏幕尺寸中？当屏幕尺寸低于 1000 像素时，我希望隐藏矩形中的部分。

特别困难的是导航栏。大家有什么建议？

【问题讨论】：

标签： html css twitter-bootstrap layout twitter-bootstrap-3

【解决方案1】：

嗯，有几种方法可以做到这一点。

注意：我只是提供一个想法，而不是整个解决方案。

1) 你可以有两个divs 喜欢

HTML

<div class="firstDiv" />
<img />
<div class="secDiv" />

CSS

.firstDiv {
   position: absolute;
   left: 0;
   width: 20%;
   opacity: 0;
}

.secDiv {
   position: absolute;
   right: 0;
   width: 20%;
   opacity: 0;
}

@media(max-screen: 1000px) {
   .firstDiv .secDiv {
      opacity: 1;
   }
}

2）您可以制作两张图片（一张是完整的，另一张是裁剪的）并将背景设置为

HTML

<div class="myImage" />

CSS

.myImage {
   background-image: url('/path/to/fullimage.png');
}

@media(max-screen: 1000px) {
   .myImage {
      background-image: url('/path/to/croppedimage.png');
   }
}

【讨论】：