相对于包含 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 具有浏览器窗口的宽度，包含 3 列，当窗口宽度低于 768 像素时，宽度从 33% 变为 100%

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

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

Answer 1

这是将width to 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>

---

在这一点上，我想提一下我对引导程序的绝对仇恨，主要是因为它缺乏功能。严肃地说，自己编写 css 会更有益（实际上更省时），尤其是当您想“开箱即用”地做 任何事情 时。我发现引导程序限制性太强对于任何类型的“更多功能”

Answer 2

看起来唯一的方法就是以编程方式进行。 在another StackOverflow question 中找到了解决方案。 基本上你有一个类，它为元素提供 100% 宽度，并且基于父宽度，这个类被切换。

.m {
    width: 100%;   
}

$('.somecontainer').on('resize',function(){
    if ($('.somecontainer').width() < 140) {
        $('.somecontainer').addClass('m');
    } else {
        $('.somecontainer').removeClass('m');
    }
});

Answer 3

试试这个删除引导类的填充，或者你可以通过给你自己的类来覆盖它

HTML：

<div class="container regular">
  <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 regular">
  <div class="col-xs-12 col-md-offset-4 col-md-4 border1 regular">
    <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>

CSS：

.height {
  height: 20px;
}
.target {
  width: 325px;
  height: 100px;
}
.col-md-4{
  padding:0;
}
.border1 {
  border: 1px black solid;
}
.border2 {
  border: 1px blue solid;
}
.border3 {
  border: 1px red solid;
}

Answer 4

试试这个css：

.abs {
  position: relative;
  display: inline-block;
}