Question

我以无响应的方式设置了here，它被塑造成正确显示@1920x1080屏幕。现在，我希望它能够响应，所以我开始使用Bootstrap进行冒险。我知道列必须总和为12，但我的网页内容为2个div， 100％宽（访问我的网站并向右滚动以查看我正在谈论的内容）

我的问题是 - 如何将该布局移植到我的响应式项目中？有没有办法将2 container-fluid个div放在一行？

Answer 1

添加包装，为其提供200vw宽度和display: flex

html, body {
  margin: 0;
}
.wrapper {
  width: 200vw;
  display: flex;
}
.container-fluid {
  flex: 1;
  background: lightgray
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        First
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        Second
      </div>
    </div>
  </div>
</div>

或display: inline-block

html, body {
  margin: 0;
}
.wrapper {
  white-space: nowrap;
}
.container-fluid {
  display: inline-block;
  width: 100%;
  background: lightgray;
  white-space: normal;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        First
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        Second
      </div>
    </div>
  </div>
</div>

Answer 2

该行必须是容器流体而不是相反的。要创建两个100％宽的div，您可以：

<section class="container-fluid">
   <div class="row">
      <div class="col-xs-12">
            First div 100% width for all device
      </div>
   </div>
   <div class="row">
      <div class="col-xs-12">
            Second div 100% width for all device
      </div>
   </div>
</section>

Bootstrap响应式布局 - 2x100％宽度的容器

2 个答案: