Boot grid relative to containing div instead of window

Question

Please look at this pen for a quick example 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;
}

container A has a browser window width and contains 3 columns that go from 33% to 100% wide when the window width is below 768 pixels

container B is the same set as its width is only 350 pixels. As you can see in the pen, 3 columns have a width of 33%.

I am sure that this works as intended, but is it possible to make a grid relative to its containing div instead of the browser window? those. so that divs in container B are 100% wide since width B is less than 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>

Hide result

---

-:

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>

Hide result

---

, - . , , ( ) css, - " ". , bootstrap

Answer 2

, - . fooobar.com/questions/542216/.... , 100% , .

.m {
    width: 100%;   
}

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

Answer 3

Try with this css:

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