下拉菜单中的Bootstrap容器

Question

我正在使用Bootstrap下拉菜单，但我需要使用容器保持下拉内容最大宽度匹配网站宽度。但是，有效的解决方案不是有效的HTML。请检查小提琴：https://jsfiddle.net/s5ug07t4/11/

<div class="collapse navbar-collapse js-navbar-collapse">
  <ul class="nav navbar-nav">
    <li class="dropdown mega-dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Main menu item</a>
      <!-- <div class="container">That's the issue causing container. It should be here, but the dropdown doesn't open then -->
      <ul class="dropdown-menu mega-dropdown-menu row">
      <div class="container"><!-- this is not valid HTML, but does the job right -->
        <li class="col-sm-3 col-xs-6">
          <ul>