Bootstrap Static Column Width

Question

This is a more important issue than anything. So let's say I have two columns in Bootstrap, and I want the right col to be set to 300 pixels, until it reaches the 768px breakpoint, and then set it.

<div class="container">
  
  <div class="row">
    
    <!-- This column needs to fill the rest of the container fluidly -->
    <div class="col-sm-8"></div>
    
    <!-- This column needs to stay 300px -->
    <div class="col-sm-4"></div>
    
  </div>
  
</div>

Run code

My initial solution was to simply add classes to each container and statically set the width of both containers for each media breakpoint, and then set the width to auto at the control point of the stack. However, I do not like this solution because it is extremely verbose and seems too fragile to set columns as static. I would prefer that a dynamic mix be used in the left column or be set with a percentage.

Any thoughts? Thanks!

Answer 1

- Bootstrap , . . ?

: flex

Flexbox Layout ( ) ( W3C Last Call Working Draft) , , / ( , "flex" ).

, , , .

, , HTML:

<div class="flex-container">
  <div class="left-content content">

  </div>
  <div class="right-content content">

  </div>
</div>

, , ( , , .)

CSS:

.flex-container {
  display: flex;
  flex-flow: row;
}

.content {
  min-height: 500px;
}

.left-content {
  background-color: rgba(0,0,0,0.2);
  flex: 1 1 auto;
}

.right-content {
  width: 300px;
  background-color: rgba(0,0,0,0.4);
}

@media (max-width: 768px) {
  .flex-container {
    flex-flow:column;
  }
  .right-content {
    width: 100%;
  }
}

, flex-flow: row, ( , ). 300px , flex: 1 1 auto; , ...

, . (flex-shrink flex-basis) . 0 1 .

, .

, - max-width: 768px, , , flex-flow: column width: 100% , , , .

- , , .

Answer 2

, .

( !) , @media, . , @media (min-width: 768px) { .my-class: { width: 300px; } }. @media Mozilla Dev.