There is a code snippet:

<div class="container-fluid"> <div class="row"> <div class="col-md-6" id="article"></div> </div> </div>

In the block with id="article" content is generated dynamically. In this case, the block is stretched horizontally if the content is too large in width. How to prohibit horizontal stretching beyond the width set by the class col- ?

Clarification:

  1. The contents of the article block may contain tables, the limitation with the help of max-width does not work for them. Example:

 <table cols="6" rules="NONE" border="0" cellspacing="0" height="611" width="648"> <colgroup> <col width="86"> <col width="86"> <col width="129"> <col width="115"> <col width="86"> <col width="117"> </colgroup> <tbody> <tr> <td style="border-width:1px;border-style:solid;border-color:#000000;" align="CENTER" height="19" valign="TOP">2016-11-10</td> <td style="border-width:1px;border-style:solid;border-color:#000000;" align="CENTER">36,00</td> <td style="border-width:1px;border-style:solid;border-color:#000000;" align="CENTER">1&nbsp;230&nbsp;933</td> <td style="border-width:1px;border-style:solid;border-color:#000000;" align="CENTER">44&nbsp;313&nbsp;588,00</td> <td align="LEFT"> <br> </td> <td align="LEFT"> <br> </td> </tr> </tbody> </table>

  1. I tried to implement a variant using a wrapper block inside the article . However, using the max-width: 100% style does not work (since the outer container does not have a fixed width), and there is no possibility to set a specific value for max-width (it is unknown).
  • And you can add code where you have a problem div does not expand as you want? And then I will try to solve your problem. - Vadim Ovchinnikov
  • @VadimOvchinnikov Added sample code. - DarkGenius

1 answer 1

bootstrap styles:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

html:

 <div class="container-fluid"> <div class="row"> <div class="col-md-6 col" id="article"></div> <div class="col-md-4 col"></div> <div class="col-md-2 col"></div> </div> </div>

container styles:

 .col { position: relative; } .col > *{ max-width: 100%; }
  • The contents of the article block may contain tables, the limitation with the help of max-width does not work for them. - DarkGenius
  • a container with a class .table-responsive - kizoso provided in the bootstrap