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

Cara membuat submenu lebar penuh di Bootstrap 4, saya mengalami masalah saat melakukannya. dan masih belum beruntung itu mengganggu saya. Saya juga memiliki tab dan gambar di dalam dropdown saya, itu sebabnya saya ingin lebar penuh. dan dapat digunakan dengan baik oleh pengguna. Saya dapat membuatnya berfungsi di bootstrap 3 tetapi menambahkan banyak fungsi yang tidak akan berfungsi di bootstrap 3 yang akan dapat berfungsi di 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>

Ini adalah CSS saya yang berfungsi di Bootstrap 3

.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
jmv 20 November 2017, 08:46

1 menjawab

Jawaban Terbaik

Untuk ini, Anda harus menghapus css induk position:relative. Saya telah menambahkan beberapa css, silakan periksa.

.navbar  .dropdown{
  position: static;
}
.navbar{
  position: static!important;
}
.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;
}
<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>
3
ankita patel 20 November 2017, 06:19