Bootstrap 容器对齐和边框

Question

我正在学习 bootstrap。以下是在不同容器中显示按钮的代码：

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

结果是：

问题：

代码中没有指定对齐方式，但是三种容器的对齐方式不同（container和container-md居中对齐，container-fliud居左对齐）。是否有针对不同类型容器的默认对齐方式？
为什么容器流体缺少底部边框？

Answer 1

您的第二个容器没有 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>

Answer 2

您可以阅读更多关于对齐的内容here
参考这个片段

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

Bootstrap 容器对齐和边框

Boostrap container aligment and border

twitter-bootstrap

bootstrap-4