bootstrap 4全宽下拉菜单

时间：2017-11-20 05:46:21

标签： jquery html css twitter-bootstrap 

.dropdown-menu {
  min-width: auto;
  width: 100%;
  height: auto;
  text-align: center;
  border-radius: 0;
  border-width: 0px;
  margin-top: -1px;
  padding: 0 0;
  max-height: 700px;
  overflow: auto;
}

.dropdown-menu hr {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.dropdown-menu ul>li {
  padding-top: 0px;
}

.material-tab {
  margin: 0 auto;
  width: 100%;
  border-bottom: 0px;
  padding: 0 50px;
}

.header-inner {
  padding: 15px 0;
  min-width: auto;
  margin: 0 auto;
}

.tab-header {
  background: #EB3137;
  padding: 0 15px;
  color: #fff;
  -webkit-box-shadow: 0px 3px 5px 0px rgba(194, 194, 194, 1);
  -moz-box-shadow: 0px 3px 5px 0px rgba(194, 194, 194, 1);
  box-shadow: 0px 3px 5px 0px rgba(194, 194, 194, 1);
}

.nav.nav-tabs>li>a:focus,
.nav.nav-tabs>li>a:hover {
  background: transparent;
  outline: 0;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:active {
  background: transparent;
  color: #FFF;
  cursor: default;
  border: 0;
}

.nav-tabs>li>a {
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  border: 0px;
  font-weight: bold;
  padding: 12px 15px 14px 15px;
}

.nav-tabs>li>a:hover {
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
}

ul.nav-tabs>li.active>a:after {
  display: block;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: white;
}

.tab-content.white-bg-tabs {
  padding: 15px;
}

.tab-content.white-bg-tabs .tab-pane {
  max-width: 960px;
  margin: 0 auto;
  background: white;
  padding: 10px;
  text-align: center;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: #ddd;
}

.list-inline h6 p {
  font-family: "Raleway Bold", sans-serif;
  text-align: left;
  color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<header>
  <div class="container">
    <div class="row">
      <nav class="navbar navbar-default">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
              <ul class="nav nav-tabs animation" role="tablist">
                <li class="active"><a href="#cars" role="tab" data-toggle="tab">Cars</a></li>
                <li><a href="#vans" role="tab" data-toggle="tab">Vans & Pickup</a></li>
                <li><a href="#suv" role="tab" data-toggle="tab">SUVs & Crossover</a></li>
                <li><a href="#mpv" role="tab" data-toggle="tab">MPVs</a></li>
                <li><a href="#hybrid" role="tab" data-toggle="tab">Hybrid</a></li>
                <li><a href="#performance" role="tab" data-toggle="tab">Performance</a></li>
              </ul>
              <!-- Tab panes -->
              <div class="tab-content white-bg-tabs">
                <div class="tab-pane active" id="cars" role="tabpanel">
                  00. SOME ITEM w IMAGE / LIST HERE
                </div>
                <div class="tab-pane" id="vans" role="tabpanel">
                  0. SOME ITEM w IMAGE / LIST HERE
                </div>
                <div class="tab-pane" id="suv" role="tabpanel">
                  1. SOME ITEM w IMAGE / LIST HERE
                </div>
                <div class="tab-pane" id="suv" role="tabpanel">
                  2. SOME ITEM w IMAGE / LIST HERE
                </div>
                <div class="tab-pane" id="mpv" role="tabpanel">
                  3. SOME ITEM w IMAGE / LIST HERE
                </div>
                <div class="tab-pane" id="hybrid" role="tabpanel">
                  4. SOME ITEM w IMAGE / LIST HERE
                </div>
                <div class="tab-pane" id="performance" role="tabpanel">
                  5. SOME ITEM w IMAGE / LIST HERE
                </div>
              </div>
              <!-- container -->
            </div>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity = "sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin = "anonymous" > </script>

如何在Bootstrap 4中使子菜单全宽，我遇到了问题。仍然没有运气它让我烦恼。我的下拉列表中也有标签和图像，这就是为什么我希望它是全宽的。并由用户正确使用。 我能够使它在bootstrap 3上运行，但添加了许多功能，这些功能在bootstrap 3中无法工作，能够在bootstrap 4上运行。

<nav class="navbar navbar-default ">
    <ul class="nav justify-content-end">

        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
                <ul class="nav nav-tabs animation" role="tablist">


                    <li class="active"><a href="#cars" role="tab" data-toggle="tab">Cars</a></li>
                    <li><a href="#vans" role="tab" data-toggle="tab">Vans & Pickup</a></li>
                    <li><a href="#suv" role="tab" data-toggle="tab">SUVs & Crossover</a></li>
                    <li><a href="#mpv" role="tab" data-toggle="tab">MPVs</a></li>
                    <li><a href="#hybrid" role="tab" data-toggle="tab">Hybrid</a></li>
                    <li><a href="#performance" role="tab" data-toggle="tab">Performance</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content white-bg-tabs">
                    <div class="tab-pane active" id="cars" role="tabpanel">
                        <ul class="list-inline">
                            <div class="row">
                                <li class="col col-md-4">
                                    <a href=""><img src="img/dropdown/cars/choose_car1.png"></a>
                                    <h6 class="price-notice">* price may vary
                                        <br>
                                        <p>2017 CAR1
                                            <br>P 611,000 starting</p>
                                    </h6>
                                </li>
                                <li class="col col-md-4">
                                    <a href=""><img src="img/dropdown/cars/choose_CAR2.png"></a>
                                    <h6 class="price-notice">* price may vary
                                        <br>
                                        <p>2017 CAR 2
                                            <br>P 896,000 starting</p>
                                    </h6>
                                </li>
                                <li class="col col-md-4">
                                    <a href=""><img src="img/dropdown/cars/choose_car3.png"></a>
                                    <h6 class="price-notice">* price may vary
                                        <br>
                                        <p>2017 CAR3
                                            <br>P 1,595,000 starting</p>
                                    </h6>
                                </li>
                                <li class="col col-md-4">

                                    <a href=""><img src="img/dropdown/cars/choose_CAR4.png"></a>
                                    <h6 class="price-notice">* price may vary
                                        <br>
                                        <p>2017 CAR4
                                            <br>P 745,000 starting</p>
                                    </h6>
                                </li>
                                <li class="col col-md-4">
                                    <a href=""><img src="img/dropdown/cars/choose_CAR5.png"></a>
                                    <h6 class="price-notice">* price may vary
                                        <br>
                                        <p>2017 CAR5
                                            <br>P 526,000 starting</p>
                                    </h6>
                                </li>
                            </div>
                        </ul>
                    </div>

                </div>
                <!-- container -->
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
    </ul>
</nav>

这是我在Bootstrap 3中运行的CSS 

.dropdown-menu {
  min-width:auto;
  width: 100%;
  height: auto; 
  text-align: center;
  border-radius: 0;
  border-width: 0px;
  margin-top: -1px;
  padding: 0 0;
  max-height: 700px;
  overflow: auto;
}
.dropdown-menu hr {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.dropdown-menu ul > li{
    padding-top: 0px;
}

1 个答案:

答案 0 :(得分：3)

为此，您必须删除父css position:relative。我已经添加了一些CSS请检查。

.navbar  .dropdown{
  position: static;
}
.navbar{
  position: static!important;
}

＆＃13;
＆＃13; 
.dropdown-menu {
  min-width: auto;
  width: 100%;
  height: auto;
  text-align: center;
  border-radius: 0;
  border-width: 0px;
  margin-top: -1px;
  padding: 0 0;
  max-height: 700px;
  overflow: auto;
}

.dropdown-menu hr {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.dropdown-menu ul>li {
  padding-top: 0px;
}

.material-tab {
  margin: 0 auto;
  width: 100%;
  border-bottom: 0px;
  padding: 0 50px;
}

.header-inner {
  padding: 15px 0;
  min-width: auto;
  margin: 0 auto;
}

.tab-header {
  background: #EB3137;
  padding: 0 15px;
  color: #fff;
  -webkit-box-shadow: 0px 3px 5px 0px rgba(194, 194, 194, 1);
  -moz-box-shadow: 0px 3px 5px 0px rgba(194, 194, 194, 1);
  box-shadow: 0px 3px 5px 0px rgba(194, 194, 194, 1);
}

.nav.nav-tabs>li>a:focus,
.nav.nav-tabs>li>a:hover {
  background: transparent;
  outline: 0;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:active {
  background: transparent;
  color: #FFF;
  cursor: default;
  border: 0;
}

.nav-tabs>li>a {
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  border: 0px;
  font-weight: bold;
  padding: 12px 15px 14px 15px;
}

.nav-tabs>li>a:hover {
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
}

ul.nav-tabs>li.active>a:after {
  display: block;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: white;
}

.tab-content.white-bg-tabs {
  padding: 15px;
}

.tab-content.white-bg-tabs .tab-pane {
  max-width: 960px;
  margin: 0 auto;
  background: white;
  padding: 10px;
  text-align: center;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: #ddd;
}

.list-inline h6 p {
  font-family: "Raleway Bold", sans-serif;
  text-align: left;
  color: #000;
}
.navbar  .dropdown{
  position: static;
}
.navbar{
  position: static!important;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

<header>
  <div class="container">
    <div class="row">
      <nav class="navbar navbar-default">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
              <ul class="nav nav-tabs animation" role="tablist">


                <li class="active"><a href="#cars" role="tab" data-toggle="tab">Cars</a></li>
                <li><a href="#vans" role="tab" data-toggle="tab">Vans & Pickup</a></li>
                <li><a href="#suv" role="tab" data-toggle="tab">SUVs & Crossover</a></li>
                <li><a href="#mpv" role="tab" data-toggle="tab">MPVs</a></li>
                <li><a href="#hybrid" role="tab" data-toggle="tab">Hybrid</a></li>
                <li><a href="#performance" role="tab" data-toggle="tab">Performance</a></li>
              </ul>

              <!-- Tab panes -->
              <div class="tab-content white-bg-tabs">
                <div class="tab-pane active" id="cars" role="tabpanel">
                  00. SOME ITEM w IMAGE / LIST HERE
                </div>

                <div class="tab-pane" id="vans" role="tabpanel">
                  0. SOME ITEM w IMAGE / LIST HERE
                </div>

                <div class="tab-pane" id="suv" role="tabpanel">
                  1. SOME ITEM w IMAGE / LIST HERE
                </div>

                <div class="tab-pane" id="suv" role="tabpanel">
                  2. SOME ITEM w IMAGE / LIST HERE
                </div>

                <div class="tab-pane" id="mpv" role="tabpanel">
                  3. SOME ITEM w IMAGE / LIST HERE
                </div>

                <div class="tab-pane" id="hybrid" role="tabpanel">
                  4. SOME ITEM w IMAGE / LIST HERE
                </div>

                <div class="tab-pane" id="performance" role="tabpanel">
                  5. SOME ITEM w IMAGE / LIST HERE
                </div>
              </div>
              <!-- container -->
            </div>
          </li>
        </ul>
      </nav>
    </div>

  </div>

</header>

<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
integrity = "sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin = "anonymous" > </script>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题