How to set sidebar width to 300px in bootstrap 3?

Question

Bootstrap

Please tell me how to make the sidebar width 300px in bootstrap 3.
It is important that the adaptive layout does not suffer.

https://codepen.io/Dmitrycode/pen/GRobOQB

<div class="container">
  <div class="row">
    <div class="col-md-9 content">left</div>
    <div class="col-md-3 sidebar"> sidebar</div>
  </div>
</div>

Tried like this:

@media only screen and (min-width : 1350px) {
  .container {
     width: 1320px;
  }
}

There is a problem with this solution. On some webOS TV LG is not displayed correctly: it runs over the edges. From a PC, if you stretch the window, the problem is not observed. You probably need a different approach.

Answer 1

I found a solution, maybe it will help someone like me:

@media (min-width: 1200px) {
    .sidebar { width:330px; }
    .content { width:calc(100% - 330px);}
}