Question

Bootstrap有两种类型的容器：响应式固定宽度容器和全宽容器，跨越视口的整个宽度。如果固定宽度和右侧是全宽，我需要建立一个左侧的容器。这可能吗？

感谢。

Answer 1

Bootstrap不是为此类布局设计的，因为列宽是基于百分比（流量）。您需要覆盖乘坐列宽和媒体查询。例如..

#fixed {
    background-color:#f5f5f5;
    padding-top:5px;
}

@media (min-width:992px) {
  #fixed {
      width: inherit;
      min-width: 585px;
      max-width: 585px;
      background-color:#f5f5f5;
      float: left;
      height: 100%;
      position:relative;
      overflow: auto;
  }
  #fluid {
      width:calc(100% - 585px);
  }
}

http://codeply.com/go/sCawdD3m0D

Answer 2

取决于您的需求。我遇到了同样的问题，我想在左侧放置一个容器，在右侧放置一个流畅的图像

我使用普通容器和50％的背景图片（如下所示）为我修复了此问题： https://jsfiddle.net/dL2u6co7/

.background{
  height:500px;
  background-image : url(http://lorempixel.com/output/nature-q-c-640-480-1.jpg);
  background-position: 100% 0;
  background-size:50%;
  background-repeat:no-repeat;
}

并在移动设备上隐藏图片

Bootstrap contianer半正常半流体

2 个答案: