css - Bootstrap 网格相对于包含 div 而不是窗口

Question

请查看此笔以获取快速示例 http://codepen.io/Irish1/pen/mymBje

html

<div class="container A">
  <div class="col-xs-12 col-md-4 border1 height"></div>
  <div class="col-xs-12 col-md-4 border2 height"></div>
  <div class="col-xs-12 col-md-4 border3 height"></div>
</div>
<div class="container B border1">
  <div class="col-xs-12 col-md-4 border1 height"></div>
  <div class="col-xs-12 col-md-4 border2 height"></div>
  <div class="col-xs-12 col-md-4 border3 height"></div>
</div>

CSS

.height {
  height: 20px;
}

.B {
  width: 325px;
  height: 100px;
}

.border1 {
  border: 1px black solid;
}
.border2 {
  border: 1px blue solid;
}
.border3 {
  border: 1px red solid;
}

容器 A 具有浏览器窗口的宽度，当窗口宽度低于 768px 时，包含 3 列，宽度从 33% 到 100%

容器 B 的设置相同，但其宽度仅为 350 像素。正如您在笔中看到的那样，3 列的宽度为 33%。

我确信这是按预期工作的，但是是否可以使网格相对于其包含的 div 而不是浏览器窗口？也就是说，容器 B 中的 div 具有 100% 的宽度，因为 B 的宽度小于 768px。

Answer 1

这是将 宽度设置为 30%，同时将 display:inline-block 设置为所有 div 子类容器。看看下面这是如何改变外观的:

.height {
  height: 20px;
}
.B {
  width: 325px;
  height: 100px;
}
.border1 {
  border: 1px black solid;
}
.border2 {
  border: 1px blue solid;
}
.border3 {
  border: 1px red solid;
}
.container div {
  width: 30%;
  display: inline-block;
}

<div class="container A">
  <div class="col-xs-12 col-md-4 border1 height"></div>
  <div class="col-xs-12 col-md-4 border2 height"></div>
  <div class="col-xs-12 col-md-4 border3 height"></div>
</div>
<div class="container B border1">
  <div class="col-xs-12 col-md-4 border1 height"></div>
  <div class="col-xs-12 col-md-4 border2 height"></div>
  <div class="col-xs-12 col-md-4 border3 height"></div>
</div>

---

媒体查询方法:

div{
  display:inline-block;
  width:30%;
  height:50px;
  background:blue;
  border:1px solid black;
  margin:1%;
  font-weight:bold;
  font-size:30px;
  text-align:center;
  transition: all 0.8s;
  }

@media screen and (max-width:768px)
  {
    
    div{
      background:red;
      display:block;
      width:100%;
      }
    
    }

<div>A</div><div>B</div><div>C</div>

---

在这一点上，我想提及我对 bootstrap 的绝对仇恨，主要是因为它缺乏功能。说真的，自己编写 CSS 会更有益(而且实际上更省时)，尤其是当您想“开箱即用”地做任何时。我发现 bootstrap 对于任何类型的“进一步功能”都限制太多