Bootstrap 4全角頁面上的柔性和可摺疊內容

我想在flex和bootstrap 4（與引導程序3相同的問題）的全高頁面上設置可摺疊的div（固定高度）。Bootstrap 4全角頁面上的柔性和可摺疊內容

目前的片段在Firefox的偉大工程，但它無法在基於瀏覽器的瀏覽器工作：collapsable的初始大小是正確的（100px），但一旦你崩潰，它不能正確調整（0px如果subresizable的高度是100%，或與可用空間成比例）。

html, body { 
 
    height:100%; 
 
    width: 100%; 
 
} 
 

 
body { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 

 
    flex-flow: column; 
 
} 
 

 
#collapsable { 
 
    height: 100px; 
 
    background-color: green; 
 
} 
 

 
#subresizable { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: pink; 
 
} 
 

 
#resizable { 
 
    -webkit-box-flex: 1; 
 
    -moz-box-flex: 1; 
 
    -webkit-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 

 
    background-color: red; 
 
}

<header> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</header> 
 
<body> 
 

 
    <div id="resizable"> 
 
    <div id="subresizable"> 
 
     <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapsable" aria-expanded="false" aria-controls="collapsable">COLLAPSE</button> 
 
    </div> 
 
    </div> 
 
    <div id="collapsable" class="collapse in"></div> 
 

 
</body>

來源

2017-02-26 bagage

自舉3，我想你只需要確保#resizable是display: flex;

#resizable { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
    background-color: red; 
    display: flex; 
}

http://www.codeply.com/go/DcioXI4Xwl

在引導4，你可以只使用d-flex UTIL類。

來源

2017-02-26 11:26:32 ZimSystem

Bootstrap 4全角頁面上的柔性和可摺疊內容

回答

相關問題