中央列的宽度为自适应（响应），但是如果在其中插入 Owl Carousel ，则其中间列为< em> fix （静态）。
如何再次使中心列成为响应宽度？
var owl=$(".owl-carousel");owl.owlCarousel({dots:!1,loop:!0,nav:!0,navText:['<i class="fa fa-chevron-left"></i>','<i class="fa fa-chevron-right"></i>']}),$(".button-refresh").click(function(){owl.trigger("refresh.owl.carousel")});body,legend{color:#9f9f9f;font-family:Tahoma,sans-serif;font-size:8pt;font-weight:700}.owl-item>div{margin:12px}.owl-next,.owl-prev{position:absolute;top:0;width:36px;bottom:0}.owl-next{left:100%;margin-left:-12px}.owl-prev{right:100%;margin-right:-12px}.owl-next i,.owl-prev i{font-size:30px;line-height:24px;margin-top:-12px;position:absolute;top:50%}.owl-next i{left:12px}.owl-prev i{right:12px}.owl-next:hover i,.owl-prev:hover i{color:red}.row{margin:0 auto;max-width:1210px;width:100%}.row:after,.row:before{content:" ";display:table}.row:after{clear:both}.row.collapse>.column,.row.collapse>.columns{padding-left:0;padding-right:0}.row.collapse .row{margin-left:0;margin-right:0}.row .row{margin:0 -.9375rem;max-width:none;width:auto}.row .row:after,.row .row:before{content:" ";display:table}.row .row:after{clear:both}.row .row.collapse{margin:0;max-width:none;width:auto}.row .row.collapse:after,.row .row.collapse:before{content:" ";display:table}.row .row.collapse:after{clear:both}.column,.columns{width:100%;float:left}.column+.column:last-child,.column+.columns:last-child,.columns+.column:last-child,.columns+.columns:last-child{float:right}.column+.column.end,.column+.columns.end,.columns+.column.end,.columns+.columns.end{float:left}.left{float:left!important}.right{float:right!important}.large-12{width:100%}<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/><link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script><div style="border: 1px solid white; display: flex; "> <div style="background-color: yellow;">LEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFT</div><div style="background-color: green; width:100%"> <div> <div class="row"> <div class="large-12 columns"> <div class="owl-carousel owl-theme"> <div> <img src="http://lorempixel.com/400/200/"/> </div><div> <img src="http://lorempixel.com/400/200/"/> </div><div> <img src="http://lorempixel.com/400/200/"/> </div><div> <img src="http://lorempixel.com/400/200/"/> </div><div> <img src="http://lorempixel.com/400/200/"/> </div><div> <img src="http://lorempixel.com/400/200/"/> </div><div> <img src="http://lorempixel.com/400/200/"/> </div><div> <img src="http://lorempixel.com/400/200/"/> </div><div> <img src="http://lorempixel.com/400/200/"/> </div><div> <img src="http://lorempixel.com/400/200/"/> </div></div><button class="button-refresh">button-refresh</button> </div></div></div></div><div style="background-color: yellow; margin-left: auto;">RIGHTRIGHTRIGHTRIGHTRIGHTRIGHTRIGHT</div></div>