Jquery 引导子菜单将行拆分为两列时的宽度设置为100%

我正在使用引导、Jquery和JavaScript。在我的页面中，有一个部分被分成两列。第一列（col-lg-8）几乎没有字段。第二列（col-lg-4）有一个菜单/子菜单。我需要以100%的宽度显示子菜单

我提到了之前提出的几个其他问题，当第一列不存在时，提供的解决方案工作得非常好

以下是一些屏幕截图： 其中子菜单扩展到100%宽度

---

添加第一列后，它将扩展到100%宽度，但仅扩展到第二列。我需要它是全屏宽度

我想知道这（无论我想实现什么）是否可能。寻求专家建议。谢谢

<div class="row">
  <div class="col-lg-8 col-sm-8">This is my column1. Lets assume there are fields here already.This is my column1. Lets assume there are fields here already.This is my column1. Lets assume there are fields here already.This is my column1. Lets assume there are fields here already.This is my column1. Lets assume there are fields here already.This is my column1. Lets assume there are fields here already.This is my column1. Lets assume there are fields here already.</div>
  <div class="col-lg-4 col-sm-4">
    <div class="navbar-header">

      <button class="navbar-toggle" data-toggle="collapse" data-target=".btnCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse btnCollapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Shop</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Artist <span class="caret"></span></a>
          <ul class="dropdown-menu col-lg-12" role="menu">
            <li><a href="#">Rich</a></li>
            <li><a href="#">Shay</a></li>
            <li><a href="#">Jose</a></li>
            <li><a href="#">Marie</a></li>
            <li><a href="#">Simon</a></li>
            <li><a href="#">Jamie</a></li>
            <li><a href="#">Andrew</a></li>
            <li><a href="#">Teddie</a></li>
          </ul>
        </li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
.nav > li.dropdown.open {
  position: static;
}

.nav > li.dropdown.open .dropdown-menu {
  display: table;
  border-radius: 0px;
  width: 100%;
  text-align: center;
  left: 0;
  right: 0;
  z-index:5;
}

.dropdown-menu > li {
  display: table-cell;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
}

@media screen and (max-width: 767px) {
  .dropdown-menu > li {
    display: block;
  }
}

这是我的专栏。假设这里已经有字段了。这是我的专栏1。假设这里已经有字段了。这是我的专栏1。假设这里已经有字段了。这是我的专栏1。假设这里已经有字段了。这是我的专栏1。假设这里已经有字段了。这是我的专栏1。假设这里已经有字段了。这是我的专栏1。假设这里已经有字段了。

















.nav>li.dropdown.open{
位置：静态；
}
.nav>li.dropdown.open.下拉菜单{
显示：表格；
边界半径：0px；
宽度：100%；
文本对齐：居中；
左：0；
右：0；
z指数：5；
}
.下拉菜单>li{
显示：表格单元格；
高度：50px；
线高：50px；
垂直对齐：中间对齐；
}
@媒体屏幕和屏幕（最大宽度：767px）{
.下拉菜单>li{
显示：块；
}
}

以下是我的小提琴的链接：

---

这是解决方案

.nav>li.dropdown.open{
位置：相对位置；
}
.nav>li.dropdown.open.下拉菜单{
显示：网格；
宽度：自动；
边界半径：0px；
文本对齐：居中；
z指数：5；
}
.下拉菜单>li{
显示：表格单元格；
高度：50px；
线高：50px；
垂直对齐：中间对齐；
}
@媒体屏幕和屏幕（最大宽度：767px）{
.下拉菜单>li{
显示：块；
}
}

这里已经有东西了
黑猫

















网站内容在这里

.nav>li.dropdown.open{
位置：静态；
}
.nav>li.dropdown.open.下拉菜单{
显示：表格；
边界半径：0px；
宽度：100%；
文本对齐：居中；
左：0；
右：0；
z指数：5；
}
.下拉菜单>li{
显示：表格单元格；
高度：50px；
线高：50px；
垂直对齐：中间对齐；
}
@媒体屏幕和屏幕（最大宽度：767px）{
.下拉菜单>li{
显示：块；
}
}

这里已经有东西了
黑猫

















网站内容在这里

使用in-nav创建左侧内容，并使该项目单独向左浮动，而nav向右浮动“添加第一列后，它将扩展到100%宽度，但仅扩展到第二列。我需要它是全屏宽度。”-那么第一列内容应该在哪里goShiladitya-这种方法似乎有效。我会在实际应用中尝试。谢谢你抽出时间。