blocks|key|2477171|text|所以这是1-3点的一个可能的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2477172|@提供了解决#1zimsystem的关键：“不是在右栏使用-，而是使用col，这样当菜单折叠时，它将填充宽度。”|offset|length|style|BOLD|2477173|要解算#2，需要在第一行和第一列中去掉h-100：|2477174|<div+class="container-fluid+h-100">
++<div+class="row+*h-100*">
+++++<div+class="col-5+col-md-3+collapse+m-0+p-0+*h-100*+bg-dark"+id="collapseExample">
+++++...
+++++</div>
++</div>
</div>|code-block|syntax|javascript|2477175|(这不是正确的代码，我用星号标记了您需要删除的类)|2477176|执行此操作后，菜单列将延伸到内容列的整个长度。|2477177|要解算#3，只需将按钮移出子列，移入主列。它停留在您分配给它的迷你列中。|2477178|<div+class="col">
++++++<button+class="btn+sticky-top"+data-toggle="collapse"+href="#collapseExample"+id=""+role="button">
+++++++++++Menu
++++++</button>
++++++<div+class="row">

+++++<div+class="col-12">
+++++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Integer+in...
+++++</div>|2477179|此外，我在菜单中添加了一些CSS，以防您最终拥有比示例中更多的链接，这样，如果列表对于屏幕来说太长，它们将正确滚动。|2477180|.collapse+.flex-column+{
++max-height:+100vh;
++overflow:+auto;
++flex-wrap:+nowrap;+/*+Optional,+if+you+don't+want+the+links+to+form+columns+if+they+overflow+*/
}
.collapse+.flex-column+li+{+
++width:+100%25;+
}|2477181|此答案的完整代码如下：|2477182|​|2477183|body{
++height+:+100vh;
++overflow+:+scroll;
}

.collapse.width.show+{
++++transition:+max-width+.3s+ease,+min-width+.3s+ease;
++++width:+100%25;
++++max-width:+100%25;
++++min-width:+initial;
}
.collapse.width,
.collapsing.width+{
+++max-width:+0;
+++min-width:+0;
+++width:+0;
+++transition:+all+.2s+ease;
}
.collapse+.flex-column+{
++max-height:+100vh;
++overflow:+auto;
++flex-wrap:+nowrap;+/*+Optional,+if+you+don't+want+the+links+to+form+columns+if+they+overflow+*/
}
.collapse+.flex-column+li+{+
++width:+100%25;+
}|2477184|<link+href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"+rel="stylesheet"/>
<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div+class="container-fluid+h-100">
++<div+class="row">
++++<div+class="col-5+col-md-3+collapse+width+m-0+p-0+bg-dark"+id="collapseExample">
++++++<ul+class="nav+flex-column+navbar-dark+sticky-top">+
++++++++<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>
++++++++<li+class="nav-item">
++++++++++<a+class="nav-link"+href="#">Link</a>
++++++++</li>
++++++++<li+class="nav-item">
++++++++++<a+class="nav-link+disabled"+href="#">Disabled</a>
++++++++</li>
++++++++<li+class="nav-item">
++++++++++<a+class="nav-link+disabled"+href="#">Disabled</a>
++++++++</li>
++++++++<li+class="nav-item">
++++++++++<a+class="nav-link+disabled"+href="#">Disabled</a>
++++++++</li>
++++++++<li+class="nav-item">
++++++++++<a+class="nav-link+disabled"+href="#">Disabled</a>
++++++++</li>
++++++++<li+class="nav-item">
++++++++++<a+class="nav-link+disabled"+href="#">Disabled</a>
++++++++</li>
++++++</ul>
++++</div>
++++<div+class="col">
++++++<button+class="btn+sticky-top"+data-toggle="collapse"+href="#collapseExample"+id=""+role="button">
+++++++++++Menu
++++++</button>
++++++<div+class="row">
+++++++
++++++++<div+class="col-12">
++++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Integer+in+lectus+in+nibh+facilisis+luctus.+Maecenas+sagittis+pellentesque+sapien,+vitae+dignissim+nisl+luctus+interdum.+Aenean+risus+justo,+vestibulum+ultrices+posuere+ornare,+consectetur+ac+enim.+Pellentesque+egestas+eleifend+diam+in+tincidunt.+Cras+eget+dignissim+lacus.+Praesent+condimentum+arcu+nisi,+ut+ultrices+lorem+imperdiet+sed.+Suspendisse+a+elit+quis+erat+volutpat+bibendum.+Proin+metus+odio,+hendrerit+at+fermentum+quis,+suscipit+id+felis.+Interdum+et+malesuada+fames+ac+ante+ipsum+primis+in+faucibus.+Nulla+nec+mattis+nibh,+in+dignissim+turpis.

Integer+sem+nulla,+malesuada+non+gravida+sit+amet,+porttitor+ac+lorem.+Nam+gravida+facilisis+pulvinar.+Maecenas+lacinia+tellus+in+diam+pretium+gravida.+Pellentesque+massa+tellus,+egestas+sed+odio+vitae,+convallis+mollis+massa.+Duis+at+scelerisque+nisi.+Phasellus+eu+dapibus+orci.+Mauris+tortor+urna,+vestibulum+eget+consectetur+id,+fringilla+non+sapien.+Vivamus+sagittis+facilisis+auctor.+Pellentesque+mollis+posuere+tincidunt.+Fusce+at+mauris+vel+ante+ullamcorper+sollicitudin.

Phasellus+nibh+ex,+fermentum+id+tristique+vel,+consequat+a+lectus.+Donec+consequat+nec+nulla+et+fringilla.+Aenean+in+ligula+in+eros+mollis+auctor+non+facilisis+leo.+Fusce+lectus+lacus,+convallis+vel+tempor+et,+mattis+non+urna.+Suspendisse+velit+libero,+dapibus+ut+augue+et,+semper+tincidunt+purus.+Donec+gravida+felis+non+consequat+sollicitudin.+Ut+imperdiet+ante+quis+est+rutrum+bibendum+at+non+eros.+Pellentesque+luctus,+ipsum+nec+lacinia+vestibulum,+nulla+lorem+volutpat+risus,+sit+amet+dignissim+nisl+ipsum+varius+neque.+In+volutpat,+quam+quis+aliquet+luctus,+nulla+nibh+hendrerit+ex,+et+eleifend+dolor+odio+et+mi.+Duis+tempus+sem+vitae+lacus+imperdiet+semper.+Curabitur+et+consequat+elit.+Cras+suscipit+rhoncus+elit,+non+volutpat+ex+vulputate+pharetra.+Donec+nec+elit+sit+amet+tortor+egestas+maximus.+Suspendisse+risus+neque,+accumsan+eu+porttitor+et,+tincidunt+quis+nulla.+Orci+varius+natoque+penatibus+et+magnis+dis+parturient+montes,+nascetur+ridiculus+mus.+Etiam+massa+est,+varius+malesuada+rhoncus+sodales,+bibendum+at+leo.

Nullam+porta+libero+vel+tortor+maximus+volutpat.+Aenean+maximus+sollicitudin+ipsum,+vitae+pulvinar+sapien+blandit+sed.+Vestibulum+sed+elit+viverra,+dignissim+nisi+at,+tristique+mi.+Pellentesque+in+viverra+nulla.+Morbi+porttitor,+ligula+id+malesuada+mattis,+lorem+libero+tempor+mauris,+sed+aliquet+neque+leo+et+nunc.+Donec+odio+nibh,+posuere+at+condimentum+vel,+laoreet+in+lacus.+Nulla+sollicitudin+scelerisque+urna,+nec+gravida+arcu+sagittis+quis.+Fusce+auctor+urna+sed+diam+dignissim,+at+interdum+lorem+ornare.+Fusce+viverra,+diam+eu+tempor+volutpat,+sapien+turpis+lacinia+ligula,+ac+venenatis+mi+magna+eget+ante.+Nullam+dignissim+blandit+urna,+vel+consectetur+dui+venenatis+ac.+Cras+volutpat,+ligula+in+finibus+mattis,+sem+quam+ullamcorper+ligula,+eget+ultricies+ipsum+mi+vitae+enim.

Proin+porta+lorem+quis+sem+porttitor,+nec+lacinia+enim+viverra.+Sed+tortor+dolor,+congue+vitae+bibendum+feugiat,+efficitur+non+augue.+Curabitur+vitae+nunc+eget+libero+euismod+fringilla.+Nulla+pretium+dignissim+lacus.+Aliquam+purus+lorem,+molestie+vel+turpis+ac,+euismod+fermentum+erat.+Vestibulum+ante+ipsum+primis+in+faucibus+orci+luctus+et+ultrices+posuere+cubilia+Curae;+Donec+ac+varius+massa,+non+tempus+elit.+Phasellus+quis+tortor+iaculis+est+sollicitudin+rutrum+id+non+mi.+In+eget+pharetra+justo.+Morbi+vitae+commodo+eros.+Quisque+facilisis+blandit+laoreet.+
++++++++</div>
++++++</div>
++++</div>
++</div>
</div><script+src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>|2477185|2477186|让我知道它进行得怎么样！|2477187|entityMap^0|0|1|S|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1E|8|@$D|1F|E|1G|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1H|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1I|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1J|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1K|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1L|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|1M|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|6|7|1N|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|L|7|1O|8|@]|9|@]|A|$M|N]]|$1|10|3|11|5|6|7|1P|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|14|3|15|5|L|7|1R|8|@]|9|@]|A|$M|N]]|$1|16|3|17|5|L|7|1S|8|@]|9|@]|A|$M|N]]|$1|18|3|13|5|6|7|1T|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|1U|8|@]|9|@]|A|$]]|$1|1B|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|1C|$]]

<p>So here's a possible solution to points 1-3. </p>

<p>The key to <strong>solving #1</strong> was provided by @zimsystem: 
"Instead of using col-auto on the right column, use col. That way it will fill the width when the menu is collapsed."</p>

<p>To <strong>solve #2</strong>, you need to get rid of h-100 in the first row and column: </p>

<pre><code>&lt;div class="container-fluid h-100"&gt;
  &lt;div class="row *h-100*"&gt;
     &lt;div class="col-5 col-md-3 collapse m-0 p-0 *h-100* bg-dark" id="collapseExample"&gt;
     ...
     &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>(this is not correct code, I marked the classes you need to delete with asterisks)</p>

<p>Once you do this, the menu column will stretch to the full length of the content column.</p>

<p>To <strong>solve #3</strong>, you just need to move the button out of a sub column, into the main column. It was staying in place within the mini column you had assigned it to. </p>

<pre><code>&lt;div class="col"&gt;
      &lt;button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" id="" role="button"&gt;
           Menu
      &lt;/button&gt;
      &lt;div class="row"&gt;

     &lt;div class="col-12"&gt;
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in...
     &lt;/div&gt;
</code></pre>

<p>
</p>

<p>Additionally, I added some CSS to the menu in case you end up having more links than in the example, so that they'll scroll properly if the list is too long for your screen.</p>

<pre><code>.collapse .flex-column {
  max-height: 100vh;
  overflow: auto;
  flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */
}
.collapse .flex-column li { 
  width: 100%; 
}
</code></pre>

<p>The full code for this answer is here: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body{
  height : 100vh;
  overflow : scroll;
}

.collapse.width.show {
    transition: max-width .3s ease, min-width .3s ease;
    width: 100%;
    max-width: 100%;
    min-width: initial;
}
.collapse.width,
.collapsing.width {
   max-width: 0;
   min-width: 0;
   width: 0;
   transition: all .2s ease;
}
.collapse .flex-column {
  max-height: 100vh;
  overflow: auto;
  flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */
}
.collapse .flex-column li { 
  width: 100%; 
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="container-fluid h-100"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-5 col-md-3 collapse width m-0 p-0 bg-dark" id="collapseExample"&gt;
      &lt;ul class="nav flex-column navbar-dark sticky-top"&gt; 
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link active" href="#"&gt;Active&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
      &lt;button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" id="" role="button"&gt;
           Menu
      &lt;/button&gt;
      &lt;div class="row"&gt;
       
        &lt;div class="col-12"&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lectus in nibh facilisis luctus. Maecenas sagittis pellentesque sapien, vitae dignissim nisl luctus interdum. Aenean risus justo, vestibulum ultrices posuere ornare, consectetur ac enim. Pellentesque egestas eleifend diam in tincidunt. Cras eget dignissim lacus. Praesent condimentum arcu nisi, ut ultrices lorem imperdiet sed. Suspendisse a elit quis erat volutpat bibendum. Proin metus odio, hendrerit at fermentum quis, suscipit id felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla nec mattis nibh, in dignissim turpis.

Integer sem nulla, malesuada non gravida sit amet, porttitor ac lorem. Nam gravida facilisis pulvinar. Maecenas lacinia tellus in diam pretium gravida. Pellentesque massa tellus, egestas sed odio vitae, convallis mollis massa. Duis at scelerisque nisi. Phasellus eu dapibus orci. Mauris tortor urna, vestibulum eget consectetur id, fringilla non sapien. Vivamus sagittis facilisis auctor. Pellentesque mollis posuere tincidunt. Fusce at mauris vel ante ullamcorper sollicitudin.

Phasellus nibh ex, fermentum id tristique vel, consequat a lectus. Donec consequat nec nulla et fringilla. Aenean in ligula in eros mollis auctor non facilisis leo. Fusce lectus lacus, convallis vel tempor et, mattis non urna. Suspendisse velit libero, dapibus ut augue et, semper tincidunt purus. Donec gravida felis non consequat sollicitudin. Ut imperdiet ante quis est rutrum bibendum at non eros. Pellentesque luctus, ipsum nec lacinia vestibulum, nulla lorem volutpat risus, sit amet dignissim nisl ipsum varius neque. In volutpat, quam quis aliquet luctus, nulla nibh hendrerit ex, et eleifend dolor odio et mi. Duis tempus sem vitae lacus imperdiet semper. Curabitur et consequat elit. Cras suscipit rhoncus elit, non volutpat ex vulputate pharetra. Donec nec elit sit amet tortor egestas maximus. Suspendisse risus neque, accumsan eu porttitor et, tincidunt quis nulla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam massa est, varius malesuada rhoncus sodales, bibendum at leo.

Nullam porta libero vel tortor maximus volutpat. Aenean maximus sollicitudin ipsum, vitae pulvinar sapien blandit sed. Vestibulum sed elit viverra, dignissim nisi at, tristique mi. Pellentesque in viverra nulla. Morbi porttitor, ligula id malesuada mattis, lorem libero tempor mauris, sed aliquet neque leo et nunc. Donec odio nibh, posuere at condimentum vel, laoreet in lacus. Nulla sollicitudin scelerisque urna, nec gravida arcu sagittis quis. Fusce auctor urna sed diam dignissim, at interdum lorem ornare. Fusce viverra, diam eu tempor volutpat, sapien turpis lacinia ligula, ac venenatis mi magna eget ante. Nullam dignissim blandit urna, vel consectetur dui venenatis ac. Cras volutpat, ligula in finibus mattis, sem quam ullamcorper ligula, eget ultricies ipsum mi vitae enim.

Proin porta lorem quis sem porttitor, nec lacinia enim viverra. Sed tortor dolor, congue vitae bibendum feugiat, efficitur non augue. Curabitur vitae nunc eget libero euismod fringilla. Nulla pretium dignissim lacus. Aliquam purus lorem, molestie vel turpis ac, euismod fermentum erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ac varius massa, non tempus elit. Phasellus quis tortor iaculis est sollicitudin rutrum id non mi. In eget pharetra justo. Morbi vitae commodo eros. Quisque facilisis blandit laoreet. 
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>Let me know how it goes!</p>


<p>Trying to achieve something like this : <a href="https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html" rel="noreferrer">https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html</a></p>

<p>I've seen some examples online using other versions of bootstrap, but they all change the css too much, which makes it harder to learn bootstrap.</p>

<p>I was wondering if in Bootstrap 4 this can be done using tools like collapse, stacked pills, flexbox?</p>

<p>This is what I could achieve : <a href="https://jsfiddle.net/kL9u6esw/20/" rel="noreferrer">https://jsfiddle.net/kL9u6esw/20/</a></p>

<p>What is missing from my Jsfiddle :</p>

<ol>
<li>Not correctly responsive</li>
<li>The navbar isn't scrolling properly with the sticky class</li>
<li>The menu button isn't sticky even though I set the class.</li>
<li>A background dimmer, although not necessary for the answer, would be great</li>
</ol>

<p>In my example I couldn't figure out how to insert a navbar, not sure if its necessary for it to be properly responsive.</p>

<p>Also not sure if having it as a columns is the correct way to do it, shouldn't it be off-canvas?</p>

<p>Html code :</p>

<pre><code>&lt;div class="container-fluid h-100"&gt;
  &lt;div class="row h-100"&gt;
    &lt;div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark" id="collapseExample"&gt;
      &lt;ul class="nav flex-column navbar-dark sticky-top"&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link active" href="#"&gt;Active&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-12"&gt;
          &lt;button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button"&gt;
            Menu
          &lt;/button&gt;   
        &lt;/div&gt;
        &lt;div class="col-12"&gt;
          Lorem...
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>


Create a responsive navbar sidebar "drawer" in Bootstrap?

尝试实现这样的功能：我在网上看到过一些使用其他版本的bootstrap的示例，但它们都对css进行了太多的更改，这使得学习bootstrap变得更加困难。我想知道在Bootstrap 4中是否可以使用像折叠，堆叠药丸，flexbox这样的工具来实现这一点？这就是我所能实现的：我的Jsfiddle缺少了什么：无法正确响应...

问在Bootstrap中创建一个响应式导航栏“抽屉”？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Bootstrap中创建一个响应式导航栏“抽屉”？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Bootstrap中创建一个响应式导航栏“抽屉”？
EN