Bootstrap 4导航栏和内容填充高度flexbox

Bootstrap 4导航栏和内容填充高度flexbox

而不是

h-100

在黄色内容区域上使用，而是添加一个额外的CSS类以使其高度可弯曲增长：1 …

.flex-fill {  flex:1 1 auto;}<div >    <nav >        <a  href="/">Brand</a>        <button  aria-expanded="true" aria-controls="navbar-test" aria-label="Toggle navigation" type="button" data-target="#navbar-test" data-toggle="collapse"> <span ></span>        </button>        <div  id="navbar-test"> <ul >     <li >         <a  id="dropdown1" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">Menu Item</a>         <div  aria-labelledby="dropdown1">  <a  href="/Device">Sub menu</a>         </div>     </li>     <li >         <a  href="/Test">Test</a>     </li> </ul>        </div>    </nav>    <div >        <main  ></main>    </div></div>

注： 该

flex-fill

实用程序类将包括在未来引导4.1版本