Question

我正在使用bootstrap，Jquery，JavaScript。在我的页面中，我有一个分为两列的部分。第一列（col-lg-8）具有很少的字段。第二列（col-lg-4）具有Menu / SubMenu。我需要以100％的宽度显示SubMenu。

我提到了其他几个先前提出的问题，当第一列不存在时，所提供的解决方案完全正常。

以下是一些截图： This is without First column子菜单扩展到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;
  }
}

这是我小提琴的链接： https://jsfiddle.net/santto/yp2kts4k/

Answer 1

您可以使用解决方案https://jsfiddle.net/yp2kts4k/1/

＆＃13;

.nav > li.dropdown.open {
  position: relative;
}

.nav > li.dropdown.open .dropdown-menu {
  display: grid;
  width: auto;
  border-radius: 0px;
  text-align: center;
  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;
  }
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="navbar navbar-default navbar-static-top">
  <div class="container">
<div class="row">
  <div class="col-lg-8 col-sm-8">something is here already</div>
  <div class="col-lg-4 col-sm-4">
    <div class="navbar-header">
      <div class="navbar-brand">Blackcat</div>
      <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>
  </div>
  <!-- end container -->
</div>
<!-- end navbar navbar-inverse navbar-static-top -->

<!-- container -->
<div class="container">
  <div class="row">
    <p>Site content here...</p>
  </div>
  <!-- End row -->
</div>
<!-- End container -->

＆＃13;

Answer 2

.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;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="navbar navbar-default navbar-static-top">
  <div class="container">
<div class="row">
 
  <div class="col-lg-12 col-sm-4">
   <div class="col-lg-8 col-sm-8">something is here already</div>
    <div class="navbar-header">
      <div class="navbar-brand">Blackcat</div>
      <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>
  </div>
  <!-- end container -->
</div>
<!-- end navbar navbar-inverse navbar-static-top -->

<!-- container -->
<div class="container">
  <div class="row">
    <p>Site content here...</p>
  </div>
  <!-- End row -->
</div>
<!-- End container -->

demo

对这两行进行更改

<div class="col-lg-12 col-sm-4"> col-lg-4 to col-lg-12

<div class="col-lg-8 col-sm-8">something is here already</div>

并在<div class="col-lg-12 col-sm-4">

中移动了这一行

当行分成两列时，Bootstrap子菜单将宽度设置为100％

2 个答案: