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是相同的设置接受，其宽度仅为350px。正如您在笔中看到的那样，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>

此时我想提一下我的绝对仇恨 for bootstrap，主要是因为它缺乏功能。就像，严肃地说，自己编写css会更有益（并且实际上更省时），特别是当你想要开箱即用任何'时。对于任何类型的“进一步功能”，我发现bootstrap 限制性太强

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;
}

相对于包含div而不是window的bootstrap网格

4 个答案: