我正在學習引導程式。以下是在不同容器中顯示按鈕的代碼：
<div class="container" style="border:1px solid #cecece;">
<h1>Bootstrap 4 simple container (.container class)</h1>
<p>
<button type="button" class="btn btn-info">example button 1</button>
<button type="button" class="btn btn-danger">example button 2</button>
</p>
</div>
<div class="container-fluid" style="border:1px solid #cecece;">
<h1>Bootstrap 4 fluid container (.container-fluid class)</h1>
<p>
<button type="button" class="btn btn-info">example button 1</button>
<button type="button" class="btn btn-danger">example button 2</button>
</p>
<div class="container-md" style="border:1px solid #cecece;">
<h1>Bootstrap 4 container-md (.container-md class)</h1>
<p>
<button type="button" class="btn btn-info">example button 1</button>
<button type="button" class="btn btn-danger">example button 2</button>
</p>
</div>
結果是：
問題：
代碼中沒有指定對齊方式，但是 3 種型別的容器對齊方式不同（container 和 container-md 對齊到中心，而 container-fliud 對齊到左側）。不同型別的容器是否有默認對齊方式？
為什么容器流體缺少底部邊框？
uj5u.com熱心網友回復：
您的第二個容器沒有 div 結束標記。下面的代碼應該修復它。
<div class="container" style="border:1px solid #cecece;">
<h1>Bootstrap 4 simple container (.container class)</h1>
<p>
<button type="button" class="btn btn-info">example button 1</button>
<button type="button" class="btn btn-danger">example button 2</button>
</p>
</div>
<div class="container-fluid" style="border:1px solid #cecece;">
<h1>Bootstrap 4 fluid container (.container-fluid class)</h1>
<p>
<button type="button" class="btn btn-info">example button 1</button>
<button type="button" class="btn btn-danger">example button 2</button>
</p>
</div>
<div class="container-md" style="border:1px solid #cecece;">
<h1>Bootstrap 4 container-md (.container-md class)</h1>
<p>
<button type="button" class="btn btn-info">example button 1</button>
<button type="button" class="btn btn-danger">example button 2</button>
</p>
</div>
uj5u.com熱心網友回復：
- 您可以在此處閱讀有關對齊的更多資訊，
請參閱此片段
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
- 你還沒有關閉
container-fluiddiv
<div class="container-fluid" style="border:1px solid #cecece;">
<h1>Bootstrap 4 fluid container (.container-fluid class)</h1>
<p>
<button type="button" class="btn btn-info">example button 1</button>
<button type="button" class="btn btn-danger">example button 2</button>
</p>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/463699.html