I create page with 3 columns with bootstrap5:

<div class="container">
  <div class="row">
    <div class="col-md-3">LEFT</div>
    <div class="col-md-6">CENTER</div>
    <div class="col-md-3">RIGHT</div>
  </div>
</div>

Now in columns left and right there are advertisements with 300px width. How to restrict left and right column to shrink less then 300px, and to shrink just a center column.

If i set min-width:300px on left and right, then right column is pushed down.

CodePudding user response：

Don't use fixed (proportionate) column sizing. Use Flex. Here's an example. I've reduced the image size for this demo, but it works the same with 300px images.

You may want to change behavior for mobile, maybe to stack everything so it doesn't wrap oddly. I'm not sure of your goals.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <div class="d-flex flex-wrap">
    <div><img src="https://via.placeholder.com/200"/></div>
    <div class="flex-fill">CENTER</div>
    <div><img src="https://via.placeholder.com/200"/></div>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can mimic the same (stacked to horizontal) behavior of .col-md-*s in a .row with flex toggling wrapping at the medium breakpoint with .flex-wrap.flex-md-nowrap.
Try this:

.ad {
  width: 300px;
  background: cyan;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="container-fluid">
  <div class="d-flex flex-wrap flex-md-nowrap">
    <div class="ad">LEFT</div>
    <div class="w-100">CENTER</div>
    <div class="ad">RIGHT</div>
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The simplest way is to use the Grid auto-layout columns. col-auto will shrink to fit its content (the ads), and use flex-nowrap to prevent wrapping...

<div class="container">
  <div class="row flex-md-nowrap">
    <div class="col-md-auto">
        <img src="//via.placeholder.com/300" />
    </div>
    <div class="col-md">CENTER</div>
    <div class="col-md-auto">
        <img src="//via.placeholder.com/300" />
    </div>
  </div>
</div>

Responsive Demo