使用Bootstrap 3延伸背景布局

Question

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

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

特别困难似乎是导航栏。你们有什么建议的？

Answer 1

有很多方法可以做到这一点。

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

1）你可以有两个div个像

<强> 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');
   }
}